在我用 injectIntl 包装它后丢失反应组件参考答案

【问题标题】：losing react component ref after I Wrapped it by injectIntl在我用 injectIntl 包装它后丢失反应组件参考
【发布时间】：2017-06-28 14:51:49
【问题描述】：

在我用 injectIntl 包装它后，我在 React 组件中获取 func 的引用时遇到问题。基本上我需要的是通过 ref 访问组件中的函数这就是我正在做的事情

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

    getSamples(){
      return sth
    }

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

export default injectIntl(MainContainer )

是否可以在使用 injectIntl 包装后获取 MainContainer 的引用？

【问题讨论】：

你是在调用MainContainer的方法吗？您的调用代码会有所帮助

标签： javascript reactjs

【解决方案1】：

应该传递 withRef 选项。

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

可以使用检索 MainContainer 包装组件实例

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

包装的组件实例可以使用检索

this.container.getWrappedInstance();

【讨论】：

【解决方案2】：

injectIntl 有一个 forwardRef 属性，它可以将 ref 传递给被包装的组件。

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

【讨论】：