React Portal提供了一种渲染和允许通常存在于DOM外部的子组件的第一类方法，可以生活在文档对象模型（DOM）节点中。此React Portal组件存在于父组件的DOM层次结构之外。当孩子组件在视觉上与其父组件分开时，该门户可以用作模态对话框，工具提示或加载程序来创建子组件。下面有一个语法，即我们必须在代码中使用的标准格式，可以帮助我们理解React中的此实现。
React Portal的语法
在下面的语法中，第一个论点（儿童）是任何零件我们想渲染，例如元素，字符串或片段。第二个参数（容器）是DOM元素。
Reactdom.Createportal（儿童，容器）
使用门户的重要性
门户的行为就像React的标准组件一样，它可以在DOM树中的任何地方。它具有React中其他组件具有的所有功能。以下是使用React门户的优点：
- React Portals可以使用上下文传输数据。
- 事件冒泡：通过使用位于DOM树外面的门户，我们可以与位于React Dom树的父部门进行通信。
何时应该使用门户
如果其母体组件中有一个模态，则模态将获得其父组件的宽度和高度。也有可能将模态裁剪，并且在应用程序中未正确显示。对于解决方案，我们将尝试通过使用CSS属性（例如溢出，隐藏和Z索引）来修复它。
图1简单模态无反应门户
在上图中，它的父组件内部存在，它位于父组件的宽度和高度内。
如何使用门户
下面的代码将使用“createportal（）”在外面创建一个DOM节点根树层次结构。
这是使用门户的子组件。下面的代码是如何在我们的父组件中获取它。
图2带有反应门户的模态
模态存在于DOM层次结构中，但在上图中不存在于其母体组件中。该模态使用“ createportal（）”，并且不会驻留在特定的宽度和高度之内，但是将具有React组件的所有优点，并且适用于该门户网站组件。
反应门户很容易理解
即使该组件驻留在DOM层次结构之外，我们也可以使用React门户网站来工作，就像我们通常在层次结构中一样。有关这些技术服务的更多信息，请立即与我们的专家联系。
