React Portal：解构模态窗口的终极指南

2023-10-11 05:09:34

React Portal 的前世今生：穿越时空，探索模态窗口的进化

React Portal 是一项强大的技术，它允许你将 UI 组件渲染到 DOM 树中的任何位置，而不仅仅是组件本身挂载的节点。这意味着你可以创建模态窗口、弹出菜单和其他类型的组件，而无需担心它们的样式与其他组件冲突。在本文中，我们将探索 React Portal 的概念、用法和优势，并提供几个常见的示例。

React Portal 的概念：理解跨越界限的渲染

React Portal 的概念非常简单。它允许你将一个组件渲染到 DOM 树中的另一个节点，而不是它本身挂载的节点。这使你可以创建模态窗口、弹出菜单和其他类型的组件，而无需担心它们的样式与其他组件冲突。

例如，你可以创建一个模态窗口组件，并将它渲染到 <body> 标签中。这将使模态窗口出现在页面上的所有其他内容之上，并且不会影响其他组件的样式。

React Portal 的用法：轻松创建模态窗口和弹出菜单

React Portal 的用法也很简单。只需创建一个新的 Portal 组件，并将其作为子组件传递给另一个组件即可。例如，你可以创建一个模态窗口组件，如下所示：

import React, { createPortal } from 'react';

const Modal = ({ children }) => {
  const portal = createPortal(children, document.body);

  return portal;
};

export default Modal;

然后，你可以将这个模态窗口组件传递给另一个组件，如下所示：

import React from 'react';
import Modal from './Modal';

const App = () => {
  const [showModal, setShowModal] = useState(false);

  const openModal = () => {
    setShowModal(true);
  };

  const closeModal = () => {
    setShowModal(false);
  };

  return (
    <div>
      <button onClick={openModal}>Open Modal</button>

      {showModal && <Modal>
        <h1>Hello, world!</h1>
        <button onClick={closeModal}>Close Modal</button>
      </Modal>}
    </div>
  );
};

export default App;