React 中如何使用 ref 定位 DOM 元素

在 React 中，我们通常使用虚拟 DOM 来操作页面元素。但有时候我们需要直接获取真实的 DOM 元素，比如要操作 canvas 或者视频等元素。这时候，我们可以使用 ref 来获取真实的 DOM 元素。

什么是 ref

ref 是 React 提供的一个属性，用于在组件中获取真实的 DOM 元素。ref 可以是一个字符串、一个函数或者一个对象。

• 字符串：当 ref 是一个字符串时，React 会使用 document.querySelector() 方法在组件渲染之后找到匹配的元素。例如：

// javascriptcn.com 代码示例
class MyComponent extends React.Component {
  componentDidMount() {
    const node = document.querySelector("#myNode");
    console.log(node);
  }

  render() {
    return <div id="myNode">Hello, World!</div>;
  }
}

• 函数：当 ref 是一个函数时，React 会在组件渲染之后调用该函数，并将真实的 DOM 元素作为参数传递给函数。例如：

// javascriptcn.com 代码示例
class MyComponent extends React.Component {
  componentDidMount() {
    console.log(this.myNode);
  }

  render() {
    return <div ref={node => (this.myNode = node)}>Hello, World!</div>;
  }
}

• 对象：当 ref 是一个对象时，React 会在组件渲染之后将真实的 DOM 元素挂载到该对象的 current 属性上。例如：

// javascriptcn.com 代码示例
class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.myRef = React.createRef();
  }

  componentDidMount() {
    console.log(this.myRef.current);
  }

  render() {
    return <div ref={this.myRef}>Hello, World!</div>;
  }
}

如何使用 ref

使用 ref 有两种常见的方式：一种是在类组件中使用，一种是在函数组件中使用。

在类组件中使用 ref

在类组件中使用 ref，可以使用字符串、函数或者对象三种方式。

// javascriptcn.com 代码示例
class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.myNode = null;
    this.myRef = React.createRef();
  }

  componentDidMount() {
    console.log(this.myNode);
    console.log(this.myRef.current);
  }

  handleClick = () => {
    console.log(this.myNode);
    console.log(this.myRef.current);
  };

  render() {
    return (
      <div>
        <div ref={node => (this.myNode = node)}>Hello, World!</div>
        <div ref={this.myRef}>Hello, World!</div>
        <div ref="myNode">Hello, World!</div>
        <button onClick={this.handleClick}>Click me</button>
      </div>
    );
  }
}

在上面的代码中，我们分别使用了字符串、函数和对象三种方式来定义 ref。在 componentDidMount 方法和 handleClick 方法中，我们都可以通过 ref 获取真实的 DOM 元素。

在函数组件中使用 ref

在函数组件中使用 ref，只能使用对象方式。

// javascriptcn.com 代码示例
function MyComponent(props) {
  const myRef = React.useRef(null);

  React.useEffect(() => {
    console.log(myRef.current);
  }, []);

  return <div ref={myRef}>Hello, World!</div>;
}

在上面的代码中，我们使用了 React.useRef() 方法来创建 ref。在 useEffect 方法中，我们可以获取真实的 DOM 元素。

总结

使用 ref 可以方便地获取真实的 DOM 元素，以便我们进行一些底层操作。但是，需要注意的是，在大多数情况下，我们应该尽量避免直接操作 DOM 元素，而应该使用 React 提供的组件和 API。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/650e8bd695b1f8cacd7a87b6