React 是一个非常流行的前端框架，但是在某些情况下，我们需要获取 React 组件的 DOM 节点。比如：你想自定义一个框架，需要自己检查 DOM 的特定属性，或者你需要根据 DOM 节点的位置来了解视口。因此，本文将详细介绍如何在 React 中获取组件的 DOM 节点并提供一些示例代码。
Refs（引用）
Refs 是 React 提供的一种方式，用于获取到组件的 DOM 节点。它们被视为 React 中访问底层 DOM 元素的最后选择，因为它们允许访问或修改组件的 DOM。
Refs 的使用方式如下：
-- -------------------- ---- -------
----- ----------- ------- --------------- -
------------------ -
-------------
---------- - ------------------
-
-------- -
------ ---- ---------------- ---
-
-
----- --------- - --- --------------
-------------------------------------在上述代码中，我们创建了一个 MyComponent 类，该类创建了一个 myRef 引用，当组件被渲染时，myRef 实现了对 div 元素的引用。你可以使用 current 属性来获取引用实例的 DOM 节点。最后，我们运行了以上代码，以检查是否正确返回了 DOM 节点。
这是获取 DOM 节点的一种基本的方式，但有时由于 JSX 的限制，它可能无法正常工作。因此，我们需要使用第二种方法：
ReactDOM.findDOMNode
ReactDOM.findDOMNode 是另一种获取组件 DOM 节点的方式。它可以在渲染阶段或挂载后的任何时候获取组件的 DOM 节点。
-- -------------------- ---- -------
----- ----------- ------- --------------- -
------------------- -
----- ---- - ---------------------------
------------------
-
-------- -
------ ---- ---
-
-在以上代码中，我们在 MyComponent 的 componentDidMount 方法中使用了 findDOMNode 来获取 DOM 节点。由于 render 函数返回一个只有 div 标签的虚拟 DOM 元素，所以我们可以直接使用 findDOMNode，来获取 div 元素的实际 DOM 节点。你可以在任何生命周期方法中使用 findDOMNode，例如在 componentDidUpdate 或 componentWillReceiveProps 中。
请注意，findDOMNode 可能会产生性能问题，因为它需要查找整个组件树，因此在使用此方法之前，应该考虑其他方案。甚至可以将 ref 用于某些子组件，以避免在父组件中使用 ReactDOM.findDOMNode。
示例代码
-- -------------------- ---- -------
------ ----- ---- --------
------ -------- ---- ------------
----- ----------- ------- --------------- -
------------------ -
-------------
---------- - ------------------
-
------------------- -
----- ---- - -----------------------------------------
------------------
-
-------- -
------ ---- ----------------------- -------------
-
-
---------------------------- --- ---------------------------------在上述代码中，我们创建一个名为 MyComponent 的组件。组件里包含一个 myRef 引用，并在 componentDidMount 生命周期方法中使用了 ReactDOM.findDOMNode 来获取组件的 DOM 节点。最后，将 MyComponent 实例挂载到 root DOM 上。
结论
以上是如何在 React 中获取组件的 DOM 节点的两种方法。Refs 是更为便捷的方式，但不适用于所有情况。使用 ReactDOM.findDOMNode 可以在渲染时或挂载后的任何时候获取组件 DOM 节点。这只是前端开发中的一小部分，但它确实是 React 组件和渲染最常见和最常用的部分之一。始终记得使用 React 创建的组件，永远不会做任何操作，除非你自己显式地告诉他们要做什么。
希望你们能从本文中学到一些东西，可以在自己的项目中使用这些技术。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67738c3d6d66e0f9aae47665