在 Redux 连接中使用 React forwardRef

Question

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

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

Answer 1

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

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