ref无法获取到组件实例引用

最近在使用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)