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

最近在使用react-intl国际化中,发现使用injectIntl,ref无法获取到组件实例了,最后搜索了以下,是因为:在React中,我们都会用到HOC(高阶组件),它会返回一个新的高阶组件,若用ref就不能访问到我们真正需要的被包裹的组件实例,我们访问到的其实是高阶组件实例,因而:

若HOC不做特殊处理,ref是无法访问到低阶组件实例的

若要解决这个问题,以下有两中方法:

1、添加参数withRef,组件中检查到这个flag了,就给下级组件添加一个ref,并通过getWrappedInstance方法获取

例子

// 添加withRef参数
export default injectIntl(MainContainer, { withRef: true })

// 组件中使用
 { this.container = f }} />

this.container.getWrappedInstance()

2、父组件中传递一个方法来获取ref

// 父组件
class ParentComponent extends React.Component {
  
  getInstance = (ref) => {
    this.wrappedInstance = ref
  }

  render() {
    return 
  }
}

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

export default HOCFactory(CustomizeComponent)

你可能感兴趣的:(ref无法获取到组件实例引用)