在 Redux 连接中使用 React forwardRef [英] Using React forwardRef with Redux connect

问题描述

我有一个使用 forwardRef 的 React 功能组件，如下所示:

I have a React functional component that is using forwardRef like this:

const wrapper = React.forwardRef((props, ref) => (
  <MyComponent {...props} innerRef={ref} />
));

export default wrapper;

现在我想使用 mapStateToProps 和 Redux 的 connect 函数将一些状态传递给这个组件，如下所示:

Now I want to pass some state to this component using mapStateToProps with Redux's connect function like this:

export default connect(mapStateToProps, null)(MyComponent);

我尝试以下列方式组合它们，但没有奏效:

I tried to combine them in the following way but it didn't work:

const wrapper = React.forwardRef((props, ref) => (
  <MyComponent {...props} innerRef={ref} />
));

export default connect(mapStateToProps, null)(wrapper);

如何将这两者结合起来以获得所需的行为?

How do I combine these two to get the desired behaviour?

推荐答案

您可以使用 选项在连接功能.

You can use options in connect function.

connect(mapStateToProps, null, null, { forwardRef: true })(wrapper)

这篇关于在 Redux 连接中使用 React forwardRef的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！