React 中的门户是什么，我们什么时候需要它们？

在 React 16.0 版本中，引入了 React 门户。 React 门户提出了一种将子组件渲染到 DOM 节点的方法，该节点通常出现在父组件的 DOM 层次结构之外。

在 React Portals 之前，在其父组件的层次结构之外渲染子组件是非常困难的。因为，我们在安装我们的 react 应用程序的 HTML 中有一个 DOM 元素，即我们的 index.html 在 public 文件夹中的根元素。基本上，React 将 App 组件安装到根元素上。将 id 为 root 的 div 元素用作根 DOM 元素几乎是一种惯例。 React 应用程序中的每个 React 组件都属于根元素，即在此语句中。

但是，React 门户概念为我们提供了突破此 dom 树并将组件渲染到不在此根元素下的 dom 节点的能力。这样做打破了组件需要呈现为新元素并遵循父子层次结构的约定。门户通常用于模式对话框、悬停卡、加载器和弹出消息。下面是 React 门户的语法。

句法：

ReactDOM.createPortal(child, container)

在上面的语法中，我们有两个参数，第一个参数是一个子元素，可以是 React 元素、字符串或片段，第二个参数是一个容器，它是位于 DOM 层次结构之外的 DOM 节点（或位置）将要插入我们的门户的父组件。

React 门户的优点：

门户内的事件冒泡：虽然我们没有在父 DOM 元素内渲染门户，但它的行为仍然类似于应用程序内的常规 React 组件。它可以访问属性和状态，因为它位于 DOM 树层次结构中。
React 门户可以使用 Context API 来传输组件中的数据。

导入：要创建和使用门户，您需要导入 ReactDOM，如下所示。

import ReactDOM from 'react-dom';

创建反应应用程序：

第 1 步：使用以下命令创建一个 React 应用程序。

npx create-react-app foldername

第 2 步：创建项目文件夹（即文件夹名称）后，使用以下命令移动到该文件夹。

cd foldername

项目结构：它将如下所示。

GFG

示例：这是门户的示例。在这里，我们创建了一个按钮，每当我们单击它时都会显示一个字符串。

src/App.js

import React, { Component } from 'react'
import ReactDOM from 'react-dom'
  
class Portal extends Component {
  render() {
  
    // Creating portal
    return ReactDOM.createPortal(
      ,
      document.getElementById('portal')
    );
  }
}
  
class App extends Component {
  constructor(props) {
    super(props);
  
    // Set initial state
    this.state = { click: '' };
  
    // Binding this keyword
    this.handleClick = this.handleClick.bind(this);
  }
  
  handleClick() {
  
    // This will trigger when the button 
    // inside Portal is clicked, It updates 
    // Parent's state, even though it is not 
    // rendered inside the parent DOM element
    this.setState(prevState => ({
      click: "Welcome to gfg"
    }));
  }
  
  render() {
    return (
      
        
          {this.state.click}
        
        
      
    );
  }
}
  
export default App;

public/index.html

公共/index.html

输出：

说明：我们用一个空字符串和一个函数handleClick 创建一个状态，该函数将状态的值设置为“Welcome to gfg”。当我们单击在根 DOM 节点之外呈现的按钮时，后者会作为 onClick 事件触发。

我们什么时候需要它们？

当 React 父组件具有溢出属性（溢出：隐藏）或 z-index 样式的隐藏值时，我们主要需要门户，并且我们需要一个子组件公开地从当前树层次结构中出来。

以下是我们需要反应门户时的示例：

对话框
模态
工具提示
悬停卡

在所有这些情况下，我们都在 DOM 树中的父组件之外渲染元素。

参考： https://reactjs.org/docs/portals.html