react组件如何用Ref

在React中，Ref（Reference）是用来获取对DOM元素或React元素的直接引用的一种手段。当你需要访问DOM元素或者组件实例的时候，就可以使用Ref来实现。Ref有多种使用方式，包括使用`React.createRef()`创建ref，以及使用回调ref。

1. 使用`React.createRef()`创建Ref：
在组件的构造函数中创建ref，并将其附加到你想要引用的元素上。例如：

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    // 创建一个ref来获取对元素的引用
    this.myRef = React.createRef();
  }

  render() {
    // 将ref附加到元素上
    return <div ref={this.myRef} />;
  }

  componentDidMount() {
    // 通过this.myRef.current访问DOM元素
    console.log(this.myRef.current);
  }
}

2. 使用回调Ref（Callback Refs）：
你也可以使用回调函数来设置ref。这种方式下，你直接将函数赋值给ref属性，该函数会被立即执行，并接收到引用的DOM元素或组件实例作为参数。

class MyComponent extends React.Component {
  myRef = null;

  setRef = (element) => {
    this.myRef = element;
  }

  render() {
    // 使用回调函数设置ref
    return <div ref={this.setRef} />;
  }

  componentDidMount() {
    // 通过this.myRef访问DOM元素
    console.log(this.myRef);
  }
}

在类组件中，通常会在构造函数中初始化ref，或者直接在元素上声明回调ref。在函数组件中，则可以使用`useRef`钩子来创建ref，并在需要的地方使用它。