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

在 React 中，门户 (Portals) 是一种强大的特性，可以让我们将组件渲染到根节点以外的 DOM 元素上。在本文中，我们将讨论 React 中的门户，以及何时需要使用它们。

什么是门户？

门户是一种 React 组件，可以将其渲染到 DOM 树中的任意位置。它们可以用于在页面的任何位置渲染某些内容，而不必将其放在组件的祖先节点中。这使得我们可以轻松地在应用程序中创建一些非标准的 UI 元素，例如弹出窗口、对话框或者固定的导航栏等。

通过将门户渲染到根节点以外的 DOM 元素上，我们可以确保它不会受到样式或者其它 DOM 层次结构影响。同时，它也是透明的，因此用户可以在它下面的元素上交互。这使得门户成为 React 实现 Modal 的理想方式，因为 Modal 可以覆盖整个页面，并在用户与其交互时进行操作。

门户示例

在下面的代码中，我们定义了一个门户组件，将其渲染到一个组件的祖先节点以外的 DOM 元素上。

import React, { useState } from 'react';
import ReactDOM from 'react-dom';

const Portal = ({ children }) => {
  const [container, setContainer] = useState(document.body);
  return ReactDOM.createPortal(children, container);
};

const App = () => (
  <div>
    <h1>Hello World!</h1>
    <Portal>
      <h2>Hi Portal!</h2>
    </Portal>
  </div>
);

ReactDOM.render(<App />, document.getElementById('root'));

在上面的代码中，我们定义了一个 Portal 组件，并将其渲染到 body 元素之外。

何时使用门户？

当我们需要在应用程序中创建一些非标准的 UI 元素，例如弹出窗口、对话框或者固定的导航栏等，通常就需要使用门户。

此外，当我们需要隔离某个组件，并将其渲染到另一个组件之外时，也可以使用门户。例如，在一些 React 框架中，如果我们需要在应用程序中的任何位置进行渲染，并且不希望将 UI 元素放置在其祖先组件中，那么就可以使用门户。

总之，如果您需要在 React 中创建一些非标准的 UI 元素，并可以将其渲染到 DOM 树的任意位置，那么门户就是您的最佳选择。

总结

在本文中，我们简要介绍了 React 中的门户，并讨论了何时需要使用它们。门户是 React 实现 Modal 的理想方式，因为它可以将其渲染到根节点以外的 DOM 元素上，并隔离其它组件的影响。如果您需要在 React 中创建一些非标准的 UI 元素，并可以将其渲染到 DOM 树的任意位置，那么门户就是您的最佳选择。