React 之 ref的应用

2023-12-04 11:09:35

React 中的 ref 是一个强大的工具，它允许我们访问组件实例或 DOM 元素。这在许多情况下很有用，例如，当我们需要与组件的实例进行交互时，或者当我们需要操纵 DOM 时。

React ref 的两种主要用法

获取组件实例
获取 DOM 元素实例

获取组件实例

当我们需要与组件的实例进行交互时，例如，当我们需要调用组件的方法或访问组件的状态时，我们需要获取组件的实例。我们可以通过在组件上使用 ref 属性来实现。

例如，以下代码展示了如何获取组件实例：

import React, { Component } from "react";

class MyComponent extends Component {
  render() {
    return <div>Hello, world!</div>;
  }
}

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

  render() {
    return (
      <div>
        <MyComponent ref={this.myComponentRef} />
        <button onClick={() => this.myComponentRef.current.doSomething()}>Do something</button>
      </div>
    );
  }
}

export default App;

在上面的代码中，我们在 App 组件的构造函数中创建了一个 ref 变量，并将它赋给 MyComponent 组件的 ref 属性。当 MyComponent 组件被渲染时，React 会将组件的实例赋给 this.myComponentRef.current。

现在，我们就可以通过 this.myComponentRef.current 访问 MyComponent 组件的实例，并调用它的方法或访问它的状态。例如，当用户点击按钮时，我们调用 this.myComponentRef.current.doSomething() 方法，该方法会在 MyComponent 组件中执行一些操作。

获取 DOM 元素实例

当我们需要操纵 DOM 时，例如，当我们需要设置元素的样式或监听元素的事件时，我们需要获取 DOM 元素实例。我们可以通过在元素上使用 ref 属性来实现。

例如，以下代码展示了如何获取 DOM 元素实例：

import React, { Component } from "react";

class MyComponent extends Component {
  render() {
    return <div ref={this.myDivRef}>Hello, world!</div>;
  }
}

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

  render() {
    return (
      <div>
        <MyComponent ref={this.myDivRef} />
        <button onClick={() => this.myDivRef.current.style.color = "red"}>Make it red</button>
      </div>
    );
  }
}

export default App;