推荐答案
在 React 中，Portal 提供了一种将子节点渲染到父组件 DOM 层次结构之外的 DOM 节点中的方式。通常用于处理模态框、工具提示、弹出菜单等需要脱离当前 DOM 结构的场景。
-- -------------------- ---- -------
------ ----- ---- --------
------ -------- ---- ------------
-------- ------- -------- -- -
------ ----------------------
---- ------------------
----------
-------
-------------------------------------
--
-
-------- ----- -
------ -
-----
------ --------
-------
------- -- - ----------
--------
------
--
-
-------------------- --- ---------------------------------在这个例子中，Modal 组件的内容会被渲染到 id 为 modal-root 的 DOM 节点中，而不是 App 组件的 DOM 结构中。
本题详细解读
什么是 Portal？
Portal 是 React 提供的一种机制，允许你将子组件渲染到 DOM 树中的任意位置，而不受父组件 DOM 结构的限制。这在处理模态框、工具提示、弹出菜单等需要脱离当前 DOM 结构的场景时非常有用。
如何使用 Portal？
使用 ReactDOM.createPortal 方法可以将子组件渲染到指定的 DOM 节点中。createPortal 接受两个参数：
- 子组件：需要渲染的 React 元素。
- 目标 DOM 节点：子组件将被渲染到的 DOM 节点。
ReactDOM.createPortal(children, domNode);
使用场景
- 模态框：模态框通常需要覆盖整个页面，并且不希望受到父组件样式的影响。
- 工具提示：工具提示可能需要出现在页面的任意位置，而不受父组件布局的限制。
- 弹出菜单：弹出菜单可能需要脱离父组件的 DOM 结构，以避免被父组件的样式或布局影响。
注意事项
- 事件冒泡：尽管
Portal将子组件渲染到了不同的 DOM 节点中，但事件仍然会按照 React 的组件树结构进行冒泡。这意味着在Portal中触发的事件仍然可以在父组件中捕获。 - 性能：使用
Portal不会对性能产生显著影响，因为 React 仍然会维护组件树的一致性。
示例代码
-- -------------------- ---- -------
------ ----- ---- --------
------ -------- ---- ------------
-------- --------- --------- -------- -- -
----- ------------- - ----------------------------------
------ ----------------------
---- --------------------
----------
-------
-------------
--
-
-------- ----- -
------ -
-----
------ --------
---- --------------------------
-------- --------------------------
------- -- - ------------
----------
------
--
-
-------------------- --- ---------------------------------在这个例子中，Tooltip 组件的内容会被渲染到 id 为 tooltip-target 的 DOM 节点中，而不是 App 组件的 DOM 结构中。