如何使用 React 门户将组件传输到任何地方

 

当我们在 React 中创建组件时，它们通常存在于组件树中。这基本上是可以的，但有时我们希望组件的某些部分出现在组件树之外，或者完全不同的地方。这是我们创建模态弹出窗口时的常见要求，它需要高于所有其他组件。

我们可能会在组件中创建这些组件，但最终我们希望它们高于其他所有内容，并且将它们嵌套在许多组件中可能会导致问题，因为它们将低于它们所在的任何内容：

反应组件图

 

了解决这个问题，我们可以使用 将模态从其自己的组件中传送出来并传送到模板的另一部分。这允许我们将组件放在我们想要的任何其他位置，例如HTML树的基，在标记内或在另一个元素内。即使元素存在于组件树中，也使我们能够将其放在任何我们喜欢的地方。

使用反应门户

为了向您展示门户的工作原理，请考虑我们的文件中有以下基本的 React 代码。在这里，我们希望模态显示在其他所有内容之上。因此，我们创建了一个名为 .这就是我们最终希望所有模态进入的地方：

在里面，我导入了一个名为 的组件。这是我们的Modal组件，每当用户单击按钮时都会弹出。

每当使用 设置为 true 时，模态就会出现。否则，它将消失。

我还有一些CSS来确保我们的模态确实出现在其他所有内容之上：

创建我们的 “门户”

创建门户非常简单 - 有一个功能，。我们不是在 React 中返回一些 DOM，而是返回 。createPortal()接受两个参数 - 我们想要返回的DOM元素 - 在本例中是模态 - 和我们想要将DOM元素传送到的DOM元素。

因此，我们的第二个参数是 ，因为我们想要将所有模态放入：

虽然我们将我们的DOM元素传送到 ，但它仍然表现得像一个正常的 React 子元素。由于门户仍然存在于 React 树中，因此元素所在的上下文等功能仍然工作相同。还应该注意的是，尽管我们有和在同一个文件中，但你将DOM元素传送到的位置可以在 React 代码中的任何位置。

因此，您可以将其传送到DOM中任何位置的完全不同的子组件，元素或父级。它非常强大和有用 - 所以明智地使用它。

让我们回顾一下我们的网页：

 

现在，即使位于我们的标题中，每当我们使用按钮打开模式时，它都会出现在：

 

结论

门户在 React 中是一个非常强大的工具。它们是解决基于组件的系统的主要问题的有用方法 - 将某些元素运输在所有其他元素之上。

因此，我希望你喜欢这个 React 门户指南。如果你正在学习 React，我建议你先掌握 Javascript， 你可以用我完整的Javascript手册来完成。