Using React forwardRef with Redux connect

Question

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;

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?

Answer 1

You can use options in connect function.

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

Answer 2

You can check the option on the connection method in redux: https://react-redux.js.org/api/connect
So the options allow use forwardRef
my code: connect(null,null,null,{forwardRef: true,})(LearnView)
it worked for me