React 是一款非常流行的前端框架，它提供了一种非常方便的方式来组织和渲染 UI 组件。但是在某些情况下，我们可能需要将组件渲染到不同的位置，例如在模态框、弹出框或者浮动层中。这时候我们就可以使用 React 的 Portal 功能来实现跨组件渲染。
什么是 Portal？
Portal 是 React 的一种特殊组件，它可以将子组件渲染到 DOM 树中的任意位置。通常情况下，React 组件的渲染都是在一个容器内完成的，但是 Portal 可以将渲染目标扩展到容器的外部。这意味着我们可以将组件渲染到任意位置，例如 body 标签、模态框、弹出框或者浮动层。
如何使用 Portal？
使用 Portal 非常简单，我们只需要创建一个 Portal 组件并指定渲染位置即可。下面是一个简单的例子：
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
------ -------- ---- ------------
----- ----- ------- --------- -
-------- -
------ ----------------------
--------------------
-------------------------------------
--
-
-
----- --- ------- --------- -
-------- -
------ -
-----
--------- -----------
-------
--------- ------------
--------
------
--
-
-
-------------------- --- ---------------------------------在这个例子中，我们创建了一个 Modal 组件，并使用 createPortal 方法将 Modal 组件的子元素渲染到 #modal-root 元素中。在 App 组件中，我们将 Modal 组件作为子元素渲染。
实现方式
在上面的例子中，我们使用了 createPortal 方法将 Modal 组件的子元素渲染到指定位置。Portal 的实现方式实际上就是将子元素渲染到另一个容器中，然后将这个容器插入到 DOM 树中的指定位置。下面是 createPortal 方法的定义：
ReactDOM.createPortal(child, container)
其中，child 是要渲染的子元素，container 是要渲染到的容器元素。createPortal 方法返回一个 Portal 实例，这个实例可以像普通的 React 组件一样使用。
指导意义
Portal 的实现方式可以帮助我们解决一些常见的 UI 问题，例如模态框、弹出框或者浮动层等。通过将组件渲染到不同的位置，我们可以更加灵活地控制 UI 的呈现方式，从而提升用户体验。
不过需要注意的是，使用 Portal 也可能会带来一些副作用，例如事件冒泡和 CSS 样式等问题。因此，在使用 Portal 的时候，需要仔细考虑可能出现的问题，并进行相应的处理。
结论
Portal 是 React 提供的一种非常方便的跨组件渲染方式，可以帮助我们解决一些常见的 UI 问题。通过将组件渲染到不同的位置，我们可以更加灵活地控制 UI 的呈现方式，从而提升用户体验。不过需要注意的是，在使用 Portal 的时候，需要仔细考虑可能出现的问题，并进行相应的处理。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6746b92fe504cb428ec09b03