React Portals

React 16.0 版本在 2017 年 9 月 引入了 React portals。 React portal 提供了一种在组件层级之外呈现元素的方法，即在单独的组件中。

在 React 16.0 版本之前，在父组件层级之外呈现子组件非常棘手。 如果我们这样做，会打破组件需要呈现为新元素并遵循父子层级的约定。 在 React 中，父组件总是希望去子组件去的地方。 这就是 React portal 概念的由来。

语法

这里，第一个参数（child）是组件，它可以是一个元素、字符串或片段，第二个参数（container）是一个 DOM 元素。

React v16 之前的例子

通常，当您想从组件的 render 方法返回一个元素时，它会被作为新的 div 挂载到 DOM 中，并呈现最接近的父组件的子组件。

使用 portal 的例子

但是，有时我们希望将子组件插入到 DOM 中的不同位置。 这意味着 React 不想创建一个新的 div。 我们可以通过创建 React portal 来做到这一点。

特点

• 它使用 React 16 版本及其官方 API 来创建 portals。
• 它为 React 15 版本提供了一个回退。
• 它将其子组件传输到一个新的 React portal，该 portal 默认附加到 document.body。
• 它还可以定位用户指定的 DOM 元素。
• 它支持服务端渲染
• 它支持返回数组（不需要包装 div）
• 它使用 <Portal /> 和 <PortalWithState />，因此在灵活性和便利性之间没有妥协。
• 它不会产生任何 DOM 混乱。
• 它没有依赖，极简主义。

何时使用？

React portal 的常见用例包括

• 模态框
• 工具提示
• 浮动菜单
• 小部件

安装

我们可以使用以下命令安装 React portal。

React Portal 的解释

使用以下命令创建一个新的 React 项目。

打开 App.js 文件并插入以下代码片段。

App.js

下一步是创建一个 portal 组件并在 App.js 文件中导入它。

PortalDemo.js

现在，打开 Index.html 文件并添加一个 <div id="portal-root"></div> 元素以访问根节点之外的子组件。

Index.html

输出

当我们执行 React 应用程序时，我们将得到以下屏幕。

现在，打开 Inspect (ctrl + shift + I)。在此窗口中，选择 Elements 部分，然后单击 <div id="portal-root"></div> 组件。 在这里，我们可以看到每个标签都在“portal-root”DOM 节点下，而不是“root”DOM 节点下。 因此，我们可以看到 React Portal 如何提供脱离根 DOM 树的能力。