react ref无法获取被高阶组件包装的原始组件问题

问题描述：

• react无法通过ref获取被高阶组件包装的原始组件
• 通过ref调用被dva connect包裹的组件报错

我们在平时使用ref获取一个组件的引用后，就可以直接通过ref调用组件自身的函数，但是对于高阶组件，使用ref调用原始组件的函数就会报错。

简介：

高阶组件（HOC）是 React 中用于复用组件逻辑的一种高级技巧。HOC 自身不是 React API 的一部分，它是一种基于 React 的组合特性而形成的设计模式。

简而言之：高阶组件是参数为组件，返回值为新组件的函数。

const EnhancedComponent = higherOrderComponent(WrappedComponent);

组件是将 props 转换为 UI，而高阶组件是将组件转换为另一个组件。

HOC 在 React 的第三方库中很常见，例如 Redux 的 connect 和 Relay 的 createFragmentContainer。

虽然高阶组件的约定是将所有 props 传递给被包装组件，但这对于 refs 并不适用。那是因为 ref 实际上并不是一个 prop - 就像 key 一样，它是由 React 专门处理的。如果将 ref 添加到 HOC 的返回组件中，则 ref 引用指向容器组件，而不是被包装组件。

1. 当组件是被connect绑定redux后，可以使用getWrappedInstance()获取组件的原型

例子：

定义被connect包装的test类

import {connect} from 'react-redux'
import {Component} from 'react'
export default class Test extends Component {
  constructor(props) {
    super(props);
  }
  testFunction =(test='1')=>{
      alert(test)
  }
  render() {
    return (
      <div>test</div>
    )
  }
}
function mergeProps(stateProps, dispatchProps, ownProps) {
  return Object.assign({}, ownProps, stateProps, dispatchProps)
}
export default connect({}, {},mergeProps,{withRef:true})(Test)

 在组件加载完成后调用test组件内部testFunction函数

import {Component} from 'react'
import Test from './Test'
export default class Test2 extends Component {
  constructor(props) {
    super(props);
  }
  componentDidMount(){
	  //使用connect提供的getWrappedInstance()
      this.refs.test.getWrappedInstance().testFunction('test')
  }
  render() {
    return (
      <div><Test ref='test' /></div>
    )
  }
}

2. 使用 React.forwardRef 来获取传递给它的 ref，然后转发ref到它渲染的 DOM button

借用官网例子

function logProps(WrappedComponent) {
  class LogProps extends React.Component {
    componentDidUpdate(prevProps) {
      console.log('old props:', prevProps);
      console.log('new props:', this.props);
    }

    render() {
      return <WrappedComponent {...this.props} />;
    }
  }

  return LogProps;
}

“logProps” HOC 透传（pass through）所有 props 到其包裹的组件，所以渲染结果将是相同的。

class FancyButton extends React.Component {
  focus() {
    // ...
  }

  // ...
}

// 我们导出 LogProps，而不是 FancyButton。
// 虽然它也会渲染一个 FancyButton。
export default logProps(FancyButton);

有一点需要注意：refs 将不会透传下去。这是因为 ref 不是 prop 属性。就像 key 一样，其被 React 进行了特殊处理。如果你对 HOC 添加 ref，该 ref 将引用最外层的容器组件，而不是被包裹的组件。

这意味着用于我们 FancyButton 组件的 refs 实际上将被挂载到 LogProps 组件：

import FancyButton from './FancyButton';

const ref = React.createRef();

// 我们导入的 FancyButton 组件是高阶组件（HOC）LogProps。
// 尽管渲染结果将是一样的，
// 但我们的 ref 将指向 LogProps 而不是内部的 FancyButton 组件！
// 这意味着我们不能调用例如 ref.current.focus() 这样的方法
<FancyButton
  label="Click Me"
  handleClick={handleClick}
  ref={ref}
/>;

幸运的是，我们可以使用 React.forwardRef API 明确地将 refs 转发到内部的 FancyButton 组件。React.forwardRef 接受一个渲染函数，其接收 props 和 ref 参数并返回一个 React 节点。

function logProps(Component) {
  class LogProps extends React.Component {
    componentDidUpdate(prevProps) {
      console.log('old props:', prevProps);
      console.log('new props:', this.props);
    }

    render() {
      const {forwardedRef, ...rest} = this.props;

      // 将自定义的 prop 属性 “forwardedRef” 定义为 ref
      return <Component ref={forwardedRef} {...rest} />;
    }
  }

  // 注意 React.forwardRef 回调的第二个参数 “ref”。
  // 我们可以将其作为常规 prop 属性传递给 LogProps，例如 “forwardedRef”
  // 然后它就可以被挂载到被 LogProps 包裹的子组件上。
  return React.forwardRef((props, ref) => {
    return <LogProps {...props} forwardedRef={ref} />;
  });
}