React中React.forwardRef的使用方式

一、众多周知可以forwardRef可以转发ref属性
比如要在父组件中调用子组件中某个DOM节点或者组件的ref

import React from 'react';
import { Button } from 'antd';

// 高阶组件
const Input = InputComponent => {
  const forwardRef = (props, ref) => {
    return (
      <InputComponent forwardedRef={ref} {...props}>
        <div>高级组件转发refs</div>
      </InputComponent>
    );
  };
  return React.forwardRef(forwardRef);
};

// 普通组件
const TextInput = ({ forwardedRef, children, ...rest }) => {
  return (
  <div>
    <input ref={forwardedRef} {...rest} />
    {children}
  </div>
  )
};

const InputField = Input(TextInput);

class HocRefs extends React.Component {
  constructor(props) {
    super(props);
    this.inputRef = React.createRef();
  }

  handleSubmit = () => {
    // 通过this.inputRef可以拿到TextInput组件中的input
  };

  render() {
    return (
      <div>
        <h1>高阶组件传递refs</h1>
        <InputField ref={this.inputRef} />
        <Button onClick={this.handleSubmit}>提交</Button>
      </div>
    );
  }
}
export default HocRefs;

二、除开传递ref值，还可以巧妙的传递自己想要的值,例如调用三方组件，三方组件接受一个自定义组件，想要在自定义组件获取额外的props。比如num，以下这种方式就不好处理。

class Child extends React.Component {
  state = {
    flag: true,
  };
  render() {
    const { Content } = this.props;
    return (
      <div>
        <h1>头部</h1>
        <div>
          <Content flag={this.state.flag} />
        </div>
        <div>底部</div>
      </div>
    );
  }
}

class Content extends React.Component {
  handleClick = () => {
    // 获取Father组件中的值,比如num
    console.log(this.props) // 只能够拿到Child组件传递的flag
  };

  render() {
    return (
      <div>
        <Button onClick={this.handleClick}>点击获取Father组件中的值</Button>
      </div>
    );
  }
}

class Father extends React.Component {
  state = {
    num: 1,
  };

  render() {
    return (
      <div>
        <Child Content={Content} />
      </div>
    );
  }
}
export default Father;

当然你也可以用redux，但是仅仅为了取一个值就用redux开销有点大, 这儿我们就可以巧妙的使用React.forwardRef,修改Father组件

class Father extends React.Component {
  state = {
    num: 1,
  };

  render() {
    return (
      <div>
        <Child
          Content={React.forwardRef((props, ref) => (
            // 其中props值为Child组件传递给Content的props
            <Content num={this.state.num} {...props} />
          ))}
        />
      </div>
    );
  }
}
export default Father;

这样在Content组件中既可以获取Child组件中flag也可以获取Father组件中传递的num

class Content extends React.Component {
  handleClick = () => {
    // 获取Father组件中的值
    console.log(this.props);
  };

  render() {
    return (
      <div>
        <Button onClick={this.handleClick}>点击获取Father组件中的值</Button>
      </div>
    );
  }
}

最后的结果

image.png