I have an issue with getting the ref to the func in React ponents after I am wrapping it with injectIntl. basically what I need is to get access to a func in the ponent by ref here is what I am doing

class MainContainer extends React.Component {
    constructor(props) {
        super(props);
        }

    getSamples(){
      return sth
    }

   render() {
        return (<div>this.props.sth</div>)
        }

export default injectIntl(MainContainer )

it possible to get the ref to the MainContainer after wrapped it with injectIntl?

I have an issue with getting the ref to the func in React ponents after I am wrapping it with injectIntl. basically what I need is to get access to a func in the ponent by ref here is what I am doing

class MainContainer extends React.Component {
    constructor(props) {
        super(props);
        }

    getSamples(){
      return sth
    }

   render() {
        return (<div>this.props.sth</div>)
        }

export default injectIntl(MainContainer )

it possible to get the ref to the MainContainer after wrapped it with injectIntl?

• javascript
• reactjs

• Are you trying to call a method of MainContainer? Your calling code would helpful – Björn Heiß Commented Jun 28, 2017 at 15:04

2 Answers 2

The withRef option should be passed.

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

The MainContainer wrapper ponent instance can be retrieved using

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

The wrapped ponent instance can be retrieved using

this.container.getWrappedInstance();

injectIntl has a forwardRef property which causes it to pass down ref to the wrapped ponent.

// 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