React 是一个流行的 JavaScript 库，用于构建用户界面，但是在某些情况下，我们需要直接访问 DOM 元素，例如获取输入框中的文本或添加样式。在这篇文章中，我将解释如何在 React 中访问 DOM 元素，并介绍几种等效方法来模拟 document.getElementById()。
通过 Ref 访问 DOM 元素
React 提供了一种称为 Ref 的特殊技术，用于访问组件中的 DOM 元素。使用 React.createRef() 方法创建 Ref 对象，然后将其与要访问的元素相关联。下面是一个示例代码片段，演示如何使用 Ref 访问输入框中的文本：
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
----- ----------- ------- --------- -
------------------ -
-------------
---------- - ------------------
-
----------- - -- -- -
--------------------------------------
--
-------- -
------ -
-----
------ ----------- ---------------- --
------- ------------------------------ --------------
------
--
-
-在此示例中，我们使用 React.createRef() 方法创建了一个名为 myRef 的 Ref 对象，并将其与输入框相关联。然后，我们在点击按钮时调用 handleClick 方法，该方法使用 this.myRef.current.value 访问输入框中的文本。
使用 React 中的查询选择器
在传统的 JavaScript 中，我们可以使用 document.querySelector() 和 document.querySelectorAll() 方法来访问 DOM 元素。在 React 中，我们也可以使用类似的方法，但它们略有不同。React 提供了一个名为 ReactDOM.findDOMNode() 的方法，可以通过 CSS 选择器获取组件中的 DOM 元素。以下是一个示例代码片段：
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
------ -------- ---- ------------
----- ----------- ------- --------- -
----------- - -- -- -
----- --------- - --------------------------------------
-----------------------------
--
-------- -
------ -
-----
------ ----------- ----------- --
------- ------------------------------ --------------
------
--
-
-在此示例中，我们使用 ReactDOM.findDOMNode() 方法和 refs 属性来获取具有 myRef 属性的输入框元素。然后，我们在点击按钮时调用 handleClick 方法，该方法使用 myElement.value 访问输入框中的文本。
使用第三方库
除了上述方法之外，还可以使用第三方库来访问 DOM 元素。其中最受欢迎的是 react-dom-utils 库，该库提供了与传统 JavaScript 中相同的 getElementById() 方法。以下是一个示例代码片段：
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
------ - -------------- - ---- ------------------
----- ----------- ------- --------- -
----------- - -- -- -
----- --------- - --------------------------
-----------------------------
--
-------- -
------ -
-----
------ ----------- ------------ --
------- ------------------------------ --------------
------
--
-
-在此示例中，我们使用 getElementById() 方法获取具有 ID "myInput" 的输入框元素。然后，我们在点击按钮时调用 handleClick 方法，该方法使用 myElement.value 访问输入框中的文本。
总结
在 React 中访问 DOM 元素可能会比较棘手，但是有多种方法可以解决这个问题，包括使用 Ref、查询选择器和第三方库。根据实际情况选择最适合您的方法，并避免滥
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/29589