在Redux Connect中使用React ForwardRef

Question

我有一个像这样使用forwardRef的React功能组件：

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

export default wrapper;

现在，我想将mapStateToProps与Redux的connect函数一起使用，将某些状态传递给此组件：

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

我试图通过以下方式将它们组合在一起，但没有用：

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

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

如何结合这两种方法以获得所需的行为？

Answer 1

您可以在连接功能中使用options。

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

Answer 2

如果MyComponent是功能组件，请使用钩子

这意味着您根本不需要编写连接包装器。您可以在使用功能组件时将钩子用于redux。

const result : any = useSelector(selector : Function, equalityFn? : Function)

和

const dispatch = useDispatch()

Answer 3

您可以在redux中勾选连接方式的选项：https://react-redux.js.org/api/connect
所以选项允许使用 forwardRef
我的代码：connect(null,null,null,{forwardRef: true,})(LearnView)
对我有用