react refs 案例讲解

React Refs 是 React 提供的一种访问 DOM 元素或组件实例的方法。通过 Refs，我们可以在组件中直接访问到被 Refs 引用的 DOM 元素或组件实例，从而进行一些特殊的操作。

下面，我来举一个 React Refs 的案例：

假设我们有一个 Input 组件，需要在组件加载完毕后自动获取焦点，我们可以通过 Refs 来实现这个功能。具体的实现步骤如下：

1. 在 Input 组件中定义 Refs：

class Input extends React.Component {
  constructor(props) {
    super(props);
    this.inputRef = React.createRef(); // 创建 Refs
  }

  render() {
    return <input type="text" ref={this.inputRef} />;
  }
}

2. 在 componentDidMount 生命周期中，使用 Refs 获取到 input 元素，并调用 focus() 方法：

class Input extends React.Component {
  constructor(props) {
    super(props);
    this.inputRef = React.createRef(); // 创建 Refs
  }

  componentDidMount() {
    this.inputRef.current.focus(); // 获取 input 元素并获取焦点
  }

  render() {
    return <input type="text" ref={this.inputRef} />;
  }
}

这样，当 Input 组件加载完毕后，它的 input 元素就会自动获取焦点了。

注意，Refs 只能在类组件中使用，不能在函数式组件中使用。另外，Refs 的值可以是回调函数，而不仅仅是 React.createRef() 方法返回的对象。如果使用回调函数的方式，可以在回调函数中访问到组件实例或 DOM 元素，例如：

class Input extends React.Component {
  constructor(props) {
    super(props);
    this.inputRef = null; // 创建 Refs
    this.setInputRef = element => {
      this.inputRef = element;
    };
  }

  componentDidMount() {
    this.inputRef.focus(); // 获取 input 元素并获取焦点
  }

  render() {
    return <input type="text" ref={this.setInputRef} />;
  }
}