如何在 React 中访问 DOM 元素：参考和最佳实践指南？

如何在 React 中访问 DOM 元素？ React 中的 document.getElementById() 相当于什么

在本文中，我们将探讨 React 中访问 DOM 元素的方法。 React 是一个用于构建用户界面的流行 JavaScript 库，与普通 JavaScript 中使用的传统方法相比，它提供了一种不同的 DOM 管理方法。 React 使用虚拟 DOM，它可以跟踪 UI 的状态，从而更容易以声明方式更新和管理 UI。

那么，我们如何访问 React 组件中的特定 DOM 元素？传统上，在普通 JavaScript 中，我们依靠 document.getElementById() 等方法来定位和检索 DOM 元素。在 React 中，有多种方法可以实现这一点，并且它们随着时间的推移在不同的 React 版本中不断发展。

使用字符串引用（已弃用）：

在旧版本的 React 中，字符串引用是通常用于访问 DOM 元素。它的工作原理如下：

<Progressbar completed={25}>

在此示例中，值为“Progress1”的 ref 属性附加到 Progressbar 组件。要访问 DOM 元素，您可以使用：

var object = this.refs.Progress1;

但是，此方法被认为是遗留方法，并且可能会在未来的 React 版本中删除。 Facebook 建议不要使用字符串引用，因为存在潜在问题，并鼓励使用替代方法。

使用回调模式（推荐用于 React 16.2 及更早版本）：

React 16.2 和更早版本的推荐方法早期的方法是使用回调模式，它允许在组件的渲染中直接访问 DOM 元素方法：

<Progressbar completed={25}>

在此示例中，ref 属性定义为接收 DOM 元素作为参数的箭头函数（在本例中为 input）并将其分配给组件中的数组。这允许直接访问组件内的 DOM 元素。

使用 React.createRef() (React 16.3 ):

在 React 16.3 及更高版本中，React.createRef( ) 用于创建引用。您通常将创建的引用分配给构造函数中的实例变量：

constructor(props) {
  super(props);
  this.myRef = React.createRef();
}

要访问 DOM 元素，可以使用：

const node = this.myRef.current;

建议使用此方法来访问 DOM 元素在 React 中，被认为是最佳实践。

使用 React.forwardRef() 和 useRef() (React 16.8 ):

在 React 16.8 引入的功能组件中，您可以使用 React.forwardRef 和 useRef 来创建引用并访问 DOM 元素。 React.forwardRef 用于将 ref 转发到 DOM 元素，useRef 用于创建 ref：

const Child = React.forwardRef((props, ref) => {
  return <div ref={ref}>Child</div>;
});

const App = () => {
  const childRef = useRef(null);
  return <Child ref={childRef} />;
};

来访问 DOM 元素，你可以使用：

<Progressbar completed={25}>

注意： 不鼓励使用字符串引用，因此首选使用上述任何推荐方法。 React 提供了各种访问 DOM 元素的选项，选择取决于您使用的 React 版本。

以上是如何在 React 中访问 DOM 元素：参考和最佳实践指南？的详细内容。更多信息请关注PHP中文网其他相关文章！