React学习5（组件实例三大核心之ref）

在React中，ref是一种在组件内部获取DOM节点或者其他组件实例的方法。通过使用ref属性，可以在组件的ref回调函数中访问到对应的DOM元素或组件实例。

以下是一个使用ref的例子：

import React, { Component } from 'react';
 
class MyComponent extends Component {
  focusInput = () => {
    // 通过ref访问DOM元素
    if (this.inputRef && this.inputRef.current) {
      this.inputRef.current.focus();
    }
  };
 
  render() {
    // 使用ref属性绑定到input元素
    return (
      <div>
        <input type="text" ref={this.inputRef} />
        <button onClick={this.focusInput}>Focus the input</button>
      </div>
    );
  }
}
 
// 创建ref的引用
MyComponent.prototype.inputRef = React.createRef();
 
export default MyComponent;

在这个例子中，我们创建了一个MyComponent组件，它包含一个文本输入框和一个按钮。点击按钮时，会触发focusInput方法，该方法通过ref访问输入框并使其获得焦点。

注意，从React 16.3开始，推荐使用createRef来创建ref引用，而不是使用回调函数。这种方式更加简洁和符合现代React的风格。