
Using refs with react-redux 6 | How to Use Refs on Connected Components
Some time we want to use ref on react-redux connected components . Before react-redux 6 this is how we use it .
ref={ref => this.chartsComponent = ref.getWrappedInstance()}
we had to use {withRef: true } in connected component
connect(null, null, null, { withRef: true })(ChartsComponent);
{withRef: true} is removed in react redux 6 and {forwardRef : true} is added
this is how we accomplish in react redux 6
ref={ref => this.chartsComponent = ref }
now we need to use {forwardRef : true} in connected component
connect(null, null, null, { forwardRef: true })(ChartsComponent);
Note : We do not use getWrappedInstance() now
The
withRef
option to connect has been replaced withforwardRef
. If{forwardRef : true}
has been passed toconnect
, adding a ref to the connected wrapper component will actually return the instance of the wrapped component.
Thanks for reading my article . Please clap if you liked it!