如何在 React 中访问 DOM 元素

在 React 中直接访问 DOM 元素并不是一个好的实践，因为 React 基于虚拟 DOM 实现，并且 React 组件渲染结果是由虚拟 DOM 生成的。在直接操作 DOM 元素时，很容易引起一些问题，如 UI 的不一致、性能问题等。但是有时候我们还是需要直接操作 DOM 元素，比如操作特定的 HTML5 API。

Refs

React 提供了一种访问 DOM 的方式，叫做 Refs。通过使用 Refs，我们可以在组件渲染期间关联一个 DOM 元素，从而可以在其他方法中访问这个 DOM 元素。

创建 Refs

在 React 中创建 Refs 非常简单，可以使用 React.createRef() 方法。比如，在 React 类组件中，我们可以在 constructor 方法中创建 Refs：

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.myRef = React.createRef();
  }
  render() {
    return <div ref={this.myRef}>Hello World!</div>;
  }
}

在上面的例子中，我们创建了一个名为 myRef 的 Refs，并在 render 方法中将其关联到了一个 div 元素上。

访问 Refs

一旦我们创建了 Refs 并将其关联到了 DOM 元素上，就可以在其他方法中通过 this.refs 属性访问该 DOM 元素。比如，在上面的例子中，我们可以在 componentDidMount 方法中访问这个 div 元素：

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.myRef = React.createRef();
  }
  componentDidMount() {
    console.log(this.myRef.current); // 输出该 div 元素
  }
  render() {
    return <div ref={this.myRef}>Hello World!</div>;
  }
}

需要注意的是，Refs 只在组件挂载时被设置，并且在组件卸载时被销毁。因此，我们使用 Refs 时需要确保 Refs 所关联的 DOM 元素存在，并且在组件卸载时手动删除 Refs。

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.myRef = React.createRef();
  }
  componentWillUnmount() {
    this.myRef.current = null; // 手动删除 Refs
  }
  render() {
    return <div ref={this.myRef}>Hello World!</div>;
  }
}

总结

虽然在 React 中直接访问 DOM 元素并不是一个好的实践，但是在某些情况下我们还是需要直接操作 DOM 元素。通过使用 Refs，我们可以在组件渲染期间关联一个 DOM 元素，并在其他方法中访问该 DOM 元素。需要注意的是，Refs 只在组件挂载时被设置，并且在组件卸载时被销毁，因此在使用 Refs 时需要确保 DOM 元素存在，并在卸载时手动删除 Refs。