React Portal

React Portal是React的一个特性，允许我们在父组件的DOM层级外部渲染子组件，使得我们可以将子组件渲染到父组件无法访问的位置。React Portal通常用于创建模态框、弹出菜单等UI元素。

如何使用React Portal

使用React Portal非常简单。我们可以通过ReactDOM的createPortal方法来创建Portal。

import ReactDOM from 'react-dom';

const Modal = (props) => {
  return ReactDOM.createPortal(
    props.children, // 子组件
    document.body // 父容器（可以是任意的DOM节点）
  );
};

const App = () => {
  return (
    <div>
      <h1>Hi there!</h1>
      <Modal>
        <div>Modal Content!</div>
      </Modal>
    </div>
  );
};

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

在上面的例子中，我们通过createPortal方法将Modal组件的内容渲染到document.body中，而不是渲染到App组件的DOM层级中。

创建模态框

React Portal非常适合用于创建模态框。模态框的html通常是放在body标签的最后面，这样可以保证模态框在DOM层级上最上面，不会被其他DOM元素遮挡。

import ReactDOM from 'react-dom';

const Modal = (props) => {
  return ReactDOM.createPortal(
    <div className="modal">
      <div className="modal-content">{props.children}</div>
    </div>,
    document.body
  );
};

const App = () => {
  const [isModalOpen, setIsModalOpen] = React.useState(false);

  return (
    <div>
      <h1>Hi there!</h1>
      <button onClick={() => setIsModalOpen(true)}>Open Modal</button>
      {isModalOpen && (
        <Modal>
          <button onClick={() => setIsModalOpen(false)}>Close Modal</button>
          <div>Modal Content!</div>
        </Modal>
      )}
    </div>
  );
};

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

在上面的例子中，我们创建了一个按钮，当点击按钮时，会打开一个Modal组件。Modal组件会被Portal到body标签中。

总结

React Portal是一个非常实用的React特性，允许我们将组件渲染到DOM层级外部位置，实现了更高层面的定制和控制。我们可以利用React Portal创建模态框、弹出菜单等UI元素，提升用户体验。