React 是一种流行的前端开发框架，它使用声明式编码方式来创建用户界面。React 最大的特点是将 UI 视图分解成一组组可复用的组件，并强制单向数据流，从而提高了代码的可读性和可维护性。但是在某些场景下，我们还需要直接操作 DOM 元素，那么在 React 中如何进行 DOM 操作呢？
介绍
在 React 中操作 DOM 的方法一般有两种，分别为“Refs”和“Portal”。
“Refs”是 React 提供的一种操作 DOM 元素的方法。我们可以使用 Refs 来获取到组件中某个 DOM 节点的引用，并对其进行一些操作。例如，我们可以使用 Refs 来设置输入框的焦点、动态修改某个 DOM 元素的样式等。
“Portal”是 React16 新增的功能，它可以让组件被渲染到当前组件所在的任意节点下面。这意味着我们可以使用“Portal”将某个组件渲染到 HTML 文档中任意的位置上。
使用 Refs 操作 DOM
使用 Refs 操作 DOM 的基本流程如下：
- 在组件中使用 Refs。
- 在组件渲染完成后获取到 DOM 元素。
- 使用 DOM API 对 DOM 元素进行操作。
下面是一个使用 Refs 修改 DOM 样式的示例：
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
----- -------- ------- --------- -
------------------ -
-------------
---------------- - ----------------------------
------------- - ------------------
-
------------- -
------------------------------------------- - -------
------------------------------
-
-------- -
------ -
-----
------ ----------- ------------------- --
------- ----------------------------------------
------
--
-
-
------ ------- ---------上面的代码中，我们使用 React.createRef() 创建了一个 Refs，将其设置给了一个 input 元素。在 handleClick 方法中，我们通过 this.inputRef.current 获取到了 input 元素的 DOM 引用，然后修改了其背景颜色和聚焦。
使用 Portal 操作 DOM
使用 Portal 操作 DOM 的基本流程如下：
- 创建一个用于渲染 Portal 的容器，并挂载到文档中。
- 在组件中使用 ReactDOM.createPortal() 将内容渲染到容器中。
下面是一个使用 Portal 把组件渲染到文档最后一个 div 中的示例：
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
------ -------- ---- ------------
----- ---------- ------- --------- -
------------------ -
-------------
------- - ------------------------------
-
------------------- -
-----------------------------------
-
---------------------- -
-----------------------------------
-
-------- -
------ ----------------------
-----
----- ------ --------
-------
-------
--
-
-
------ ------- -----------上面的代码中，我们创建了一个 div 容器，并在组件的 componentDidMount() 生命周期中将其挂载到了文档的 body 下。然后在 render 方法中，使用 ReactDOM.createPortal() 把组件的内容渲染到了这个容器中。
总结
在大多数情况下，我们应该遵循 React 的单向数据流的思想，尽量不直接操作 DOM 元素。但在某些场景下，直接操作 DOM 元素也是很必要的。通过本文，我们学习了使用 Refs 和 Portal 两种方式操作 DOM 元素的方法，这些知识对于提高我们的 React 开发效率和代码质量都有很大的指导意义。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/647be5d4968c7c53b0729a89