如何在 ReactJS 中使用 Portal 组件？

Portal 组件是 ReactJS 的一种高级特性，可以将组件渲染到 DOM 树的任意位置。它可以帮助我们在某些情况下更方便地处理组件间的关系，比如在弹框组件中使用。

什么是 Portal 组件？

Portal 组件是 React 提供的一种 API，它可以将组件渲染到指定的 DOM 节点之外的 DOM 节点上，即可以将组件渲染到它所在组件的后代组件之外的任何位置。

使用 Portal 组件

使用 Portal 组件非常简单，只需要在所要渲染的组件的 render 方法中加上 ReactDOM.createPortal 方法即可：

import ReactDOM from 'react-dom';

const Modal = ({ children }) => {
  return ReactDOM.createPortal(
    children,
    document.getElementById('modal-root')
  );
};

const App = () => {
  return (
    <div>
      <h1>App</h1>
      <Modal>
        <p>Hello World</p>
      </Modal>
    </div>
  );
};

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

在这个例子中，我们创建了一个 Modal 组件，并使用 ReactDOM.createPortal 方法将 children 渲染到 id 为 modal-root 的 DOM 节点上。

确保挂载点存在

在使用 Portal 组件时，需要注意确保所要渲染的 DOM 节点存在。在上面的例子中，我们需要使用 document.getElementById('modal-root') 来查找要渲染的节点。如果这个节点不存在，就会导致错误。

因此，我们需要在所要渲染的节点上先添加一个挂载点：

<div id="app-root"></div>
<div id="modal-root"></div>

这样，我们就可以在 id 为 modal-root 的 DOM 节点上渲染 Modal 组件了。

总结

Portal 组件是 ReactJS 的一种高级特性，可以将组件渲染到指定的 DOM 节点之外的 DOM 节点上。使用 Portal 组件可以更方便地处理组件间的关系，比如在弹框组件中使用。

在使用 Portal 组件时，需要确保所要渲染的 DOM 节点存在，可以在该节点上添加一个挂载点来实现。