最近在使用react-intl国际化中，发现使用injectIntl，ref无法获取到组件实例了，最后搜索了以下，是因为：在React中，我们都会用到HOC(高阶组件)，它会返回一个新的高阶组件，若用ref就不能访问到我们真正需要的被包裹的组件实例，我们访问到的其实是高阶组件实例，因而：
若HOC不做特殊处理，ref是无法访问到低阶组件实例的
若要解决这个问题，以下有两中方法：
1、添加参数withRef，组件中检查到这个flag了，就给下级组件添加一个ref，并通过getWrappedInstance方法获取
例子
// 添加withRef参数
export default injectIntl(MainContainer, { withRef: true })
// 组件中使用
<MainContainer ref={f => { this.container = f }} />
this.container.getWrappedInstance()
2、父组件中传递一个方法来获取ref
// 父组件
class ParentComponent extends React.Component {
getInstance = (ref) => {
this.wrappedInstance = ref
}
render() {
return <CustomizeComponent getInstance={this.getInstance} />
}
}
HOC里面把getInstance方法当作ref的方法传入就好
function HOCFactory(wrappedComponent) {
return class HOC extends React.Component {
render() {
let props = {
...this.props
}
if(typeof this.props.getInstance === "function") {
props.ref = this.props.getInstance
}
return <wrappedComponent {...props} />
}
}
}
export default HOCFactory(CustomizeComponent)
