在 Redux 连接中使用 React forwardRef

IT技术 reactjs redux react-hooks
2021-05-08 10:14:27

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

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

export default wrapper;

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

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

我尝试按以下方式将它们组合起来,但没有用:

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

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

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

3个回答

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

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

如果 MyComponent 是一个功能组件,请使用钩子

这意味着您根本不需要编写连接包装器。如果您使用的是功能组件,则可以为 redux 使用钩子。

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

const dispatch = useDispatch()

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