时间戳

首页 > 解决方案 > 将 React forwardRef 与 Redux 连接一起使用

reactjs - 将 React forwardRef 与 Redux 连接一起使用

问题描述

我有一个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);

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

标签： reactjsreduxreact-hooks

解决方案

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

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

推荐阅读