Losing React Component Ref After I Wrapped It By InjectIntl

I have an issue with getting the ref to the func in React components after I am wrapping it with injectIntl. basically what I need is to get access to a func in the component by re

Solution 1:

The withRef option should be passed.

export default injectIntl(MainContainer,{ withRef: true })

The MainContainer wrapper component instance can be retrieved using

<MainContainer ref={c => { this.container = c; }} />

The wrapped component instance can be retrieved using

this.container.getWrappedInstance();

Solution 2:

injectIntl has a forwardRef property with causes it to pass down ref to the wrapped component.

// MyComponent.jsx
// ...
export default injectIntl(MyComponent, {forwardRef: true});
// MyApp.js
import MyComponent from 'MyComponent';
class MyApp {
  render() {
    this.myComponentRef = React.createRef();
    return <MyComponent ref={ref} />;
  }
} 

reference