React Portals：在组件树之外渲染内容

React portals 提供了一种强大的机制，用于将子组件渲染到存在于父组件的 DOM 层次结构之外的 DOM 节点中。这项技术在各种情况下都非常宝贵，例如模态框、工具提示以及需要精确控制页面上元素的位置和堆叠顺序的情况。

什么是 React Portals？

在典型的 React 应用程序中，组件在严格的层次结构中渲染。父组件包含子组件，依此类推。但是，有时您需要摆脱这种结构。这就是 React portals 的用武之地。Portal 允许您将组件的内容渲染到 DOM 的不同部分，即使该部分不是 React 树中组件的直接后代。

想象一下，您有一个模态组件，需要在应用程序的顶层显示，而不管它在组件树中的哪个位置渲染。如果没有 portals，您可能会尝试使用绝对定位和 z-index 来实现此目的，这可能会导致复杂的样式问题和潜在的冲突。使用 portals，您可以直接将模态框的内容渲染到特定的 DOM 节点，例如专用的“modal-root”元素，确保它始终在正确的层级渲染。

为什么要使用 React Portals？

React Portals 解决了 Web 开发中的几个常见挑战：

• 模态框和对话框：Portals 是渲染模态框和对话框的理想解决方案，确保它们显示在所有其他内容之上，而不受其父组件的样式和布局的约束。
• 工具提示和弹窗：与模态框类似，工具提示和弹窗通常需要相对于特定元素绝对定位，而不管其在组件树中的位置如何。Portals 简化了此过程。
• 避免 CSS 冲突：当处理复杂的布局和嵌套组件时，可能会由于继承的样式而导致 CSS 冲突。Portals 允许您通过在父级的 DOM 层次结构之外渲染某些组件来隔离它们的样式。
• 改进可访问性：Portals 可以通过允许您控制在页面其他位置视觉定位的元素的焦点顺序和 DOM 结构来增强可访问性。例如，当模态框打开时，您可以确保焦点立即放置在模态框内，从而改善键盘和屏幕阅读器用户的使用体验。
• 第三方集成：当与具有特定 DOM 要求的第三方库或组件集成时，portals 可用于将内容渲染到所需的 DOM 结构中，而无需修改底层库代码。考虑与 Leaflet 或 Google Maps 等地图库集成，这些库通常需要特定的 DOM 结构。

如何实现 React Portals

使用 React Portals 非常简单。以下是分步指南：

1. 创建一个 DOM 节点：首先，创建一个 DOM 节点，您希望在其中渲染 portal 内容。这通常在您的 `index.html` 文件中完成。例如：

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

2. 使用 `ReactDOM.createPortal()`：在您的 React 组件中，使用 `ReactDOM.createPortal()` 方法将内容渲染到创建的 DOM 节点中。此方法接受两个参数：React 节点（您要渲染的内容）和要渲染到的 DOM 节点。

               import ReactDOM from 'react-dom';
   
   function MyComponent() {
     return ReactDOM.createPortal(
       <div>This content is rendered in the modal-root!</div>,
       document.getElementById('modal-root')
     );
   }
   
   export default MyComponent;
               
   
                 
                   Copy
                 
               
             

3. 渲染组件：像渲染任何其他 React 组件一样渲染包含 portal 的组件。

               function App() {
     return (
       <div>
         <h1>My App</h1>
         <MyComponent />
       </div>
     );
   }
   
   export default App;
               
   
                 
                   Copy
                 
               
             

在此示例中，`MyComponent` 中的内容将在 `modal-root` 元素内呈现，即使 `MyComponent` 在 `App` 组件内呈现。

示例：使用 React Portals 创建模态组件

让我们使用 React Portals 创建一个完整的模态组件。此示例包括基本样式和打开和关闭模态框的功能。

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

const modalRoot = document.getElementById('modal-root');

function Modal({ children, onClose }) {
  const [isOpen, setIsOpen] = useState(true);

  const handleClose = () => {
    setIsOpen(false);
    onClose();
  };

  if (!isOpen) return null;

  return ReactDOM.createPortal(
    <div className="modal-overlay">
      <div className="modal">
        <div className="modal-content">
          {children}
        </div>
        <button onClick={handleClose}>Close</button>
      </div>
    </div>,
    modalRoot
  );
}

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

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

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

  return (
    <div>
      <h1>My App</h1>
      <button onClick={handleOpenModal}>Open Modal</button>
      {showModal && (
        <Modal onClose={handleCloseModal}>
          <h2>Modal Content</h2>
          <p>This is the content of the modal.</p>
        </Modal>
      )}
    </div>
  );
}

export default App;
            

              
                Copy
              
            
          

在此示例中：

• 我们创建了一个 `Modal` 组件，该组件使用 `ReactDOM.createPortal()` 将其内容渲染到 `modal-root` 元素中。
• `Modal` 组件将 `children` 作为 prop 接收，允许您传递要在模态框中显示的任何内容。
• `onClose` prop 是一个在模态框关闭时调用的函数。
• `App` 组件管理模态框的状态（它是否打开或关闭）并有条件地渲染 `Modal` 组件。

您还需要向 `modal-overlay` 和 `modal` 类添加一些 CSS 样式，以便在屏幕上正确地定位模态框。例如：

            .modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.modal {
  background-color: white;
  padding: 20px;
  border-radius: 5px;
}

.modal-content {
  margin-bottom: 10px;
}

            

              
                Copy
              
            
          

使用 Portals 处理事件

使用 portals 时，一个重要的考虑因素是如何处理事件。事件冒泡的处理方式与标准 React 组件不同。

当事件在 portal 中发生时，它将像往常一样在 DOM 树中冒泡。但是，React 事件系统将 portal 视为常规 React 节点，这意味着事件也将通过包含 portal 的 React 组件树冒泡。

如果您不小心，这有时会导致意外的行为。例如，如果您在父组件上有一个事件处理程序，该处理程序应仅由该组件内的事件触发，则它也可能由 portal 中的事件触发。

为了避免这些问题，您可以使用事件对象上的 `stopPropagation()` 方法来阻止事件进一步冒泡。或者，您可以使用 React 的合成事件和条件渲染来控制何时触发事件处理程序。

以下是使用 `stopPropagation()` 阻止事件冒泡到父组件的示例：

            function MyComponent() {
  const handleClick = (event) => {
    event.stopPropagation();
    console.log('Clicked inside the portal!');
  };

  return ReactDOM.createPortal(
    <div onClick={handleClick}>This content is rendered in the portal.</div>,
    document.getElementById('portal-root')
  );
}

            

              
                Copy
              
            
          

在此示例中，单击 portal 内的内容将触发 `handleClick` 函数，但事件不会冒泡到任何父组件。

使用 React Portals 的最佳实践

以下是使用 React Portals 时要牢记的一些最佳实践：

• 使用专用 DOM 节点：为您的 portals 创建一个专用的 DOM 节点，例如 `modal-root` 或 `tooltip-root`。这使得管理 portal 内容的位置和样式更容易。
• 小心处理事件：使用 portals 时，请注意事件如何通过 DOM 树和 React 组件树冒泡。使用 `stopPropagation()` 或条件渲染来防止意外行为。
• 管理焦点：渲染模态框或对话框时，请确保正确管理焦点。在模态框打开时立即将焦点置于模态框内，并在模态框关闭时将焦点返回到先前聚焦的元素。这提高了键盘和屏幕阅读器用户的可访问性。
• 清理 DOM：当使用 portal 的组件卸载时，请确保您清理了专门为 portal 创建的任何 DOM 节点。这可以防止内存泄漏并确保 DOM 保持清洁。
• 考虑性能：虽然 portals 通常具有高性能，但将大量内容渲染到 portal 中可能会影响性能。请注意您在 portal 中渲染的内容的大小和复杂性。

React Portals 的替代方案

虽然 React Portals 是一个强大的工具，但您可以使用其他方法来实现类似的结果。一些常见的替代方案包括：

• 绝对定位和 Z-Index：您可以使用 CSS 绝对定位和 z-index 将元素定位在其他内容之上。但是，这种方法可能更复杂，并且容易出现 CSS 冲突。
• Context API：React 的 Context API 可用于在组件之间共享数据和状态，允许您根据应用程序的状态控制某些元素的渲染。
• 第三方库：有许多第三方库提供了用于模态框、工具提示和其他常见 UI 模式的预构建组件。这些库通常在内部使用 portals 或提供其他机制来在组件树之外渲染内容。

全局考虑因素

在为全球受众开发应用程序时，考虑诸如本地化、可访问性和文化差异等因素至关重要。React Portals 可以在解决这些考虑因素方面发挥作用：

• 本地化 (i18n)：以不同语言显示文本时，可能需要调整元素的布局和位置。Portals 可用于在主组件树之外渲染特定于语言的 UI 元素，从而在根据不同语言调整布局时提供更大的灵活性。例如，阿拉伯语或希伯来语等从右到左 (RTL) 语言可能需要对工具提示或模态框关闭按钮进行不同的定位。
• 可访问性 (a11y)：如前所述，portals 可以通过允许您控制元素的焦点顺序和 DOM 结构来提高可访问性。这对于依赖辅助技术（如屏幕阅读器）的残障用户尤其重要。确保您基于 portal 的 UI 元素已正确标记，并且键盘导航直观。
• 文化差异：考虑 UI 设计和用户期望方面的文化差异。例如，模态框或工具提示的位置和外观可能需要根据文化规范进行调整。在某些文化中，将模态框显示为全屏叠加层可能更合适，而在其他文化中，可能更倾向于更小、不那么突兀的模态框。
• 时区和日期格式：在模态框或工具提示中显示日期和时间时，请确保您使用用户所在位置的适当时区和日期格式。Moment.js 或 date-fns 等库对于处理时区转换和日期格式化很有帮助。
• 货币格式：如果您的应用程序显示价格或其他货币值，请使用用户所在地区的正确货币符号和格式。`Intl.NumberFormat` API 可用于根据用户的区域设置设置数字格式。

通过考虑这些全局因素，您可以为不同的受众创建更具包容性和用户友好的应用程序。

结论

React Portals 是一个强大而通用的工具，用于在标准组件树之外呈现内容。它们为模态框、工具提示和弹窗等常见 UI 模式提供了干净而优雅的解决方案。通过了解 portals 的工作原理并遵循最佳实践，您可以创建更灵活、可维护和可访问的 React 应用程序。

在您自己的项目中尝试 portals，并发现它们可以简化您的 UI 开发工作流程的多种方式。请记住，在生产应用程序中使用 portals 时，要考虑事件处理、可访问性和全局因素。

通过掌握 React Portals，您可以将您的 React 技能提升到新的水平，并为全球受众构建更复杂、更用户友好的 Web 应用程序。