React refs转发

React refs转发：

       允许某个组件接收ref并传递给其子组件中某个dom元素实例，使得父组件可访问子组件内部的某个dom元素实例。

例：

1. 通过React.forwardRef获取传递给子组件的ref，子组件将该ref转发到子组件内部的某个DOM元素中；

const CustomButton = React.forwardRef((props, ref) => (
  <button ref={ref} className="CustomButton">    {props.children}
  </button>
)); 

 2. 父组件获取获取子组件内部的某个dom；

const ref = React.createRef(); 
<CustomButton ref={ref}>Click me!</CustomButton>; 

实现过程：

1. 父组件通过React.createRef创建一个ref变量。

2. 指定ref属性

3. 子组件通过React.forwardRef将ref作为第二个参数传入内部。

4. 子组件向下转发ref参数到目标dom button元素。

5. 父组件可通过变量ref.current获取到子组件中button的实例。

高阶组件中转发refs：

用于访问源组件的实例，而非高阶组件

例：

1. 高阶组件的定义

function HocComp(WrapperComponent) {
  class LogProps extends React.Component {
    render() {
      const {forwardedRef, ...rest} = this.props;
      // 将自定义的prop属性“forwardedRef” 定义为ref
      return <WrapperComponent ref={forwardedRef} {...rest} />;    }
  }

  // 将ref其作为常规属性传递给LogProps
  // 然后它就可以被挂载到被 LogProps 包裹的子组件上。
  return React.forwardRef((props, ref) => {
    return <LogProps {...props} forwardedRef={ref} />;  });
} 

2. 使用高阶组件

const MyComp = HocComp(OriginComp);
const ref = React.createRef(); //获取到源组件的实例
<MyComp ref={ref}/>;