React@16官方文档翻译——使用 Portals 将组件渲染到父组件以外的DOM节点

React@16 官方文档翻译——Portals

简介

Portals 是一种将 React 组件渲染到父组件之外的 DOM 节点的便捷方式。这在某些情况下非常有用，例如：

• 当您想将组件渲染到一个 модальное окно 时。
• 当您想将组件渲染到另一个文档时。
• 当您想将组件渲染到一个影子 DOM 时。

用法

要使用 Portals，您需要首先创建一个新的 React 组件。该组件将包含您希望渲染到父组件之外的组件。然后，您需要在父组件中使用 ReactDOM.createPortal() 方法来创建该组件的实例。该方法接受两个参数：

• child：您希望渲染的 React 子元素。
• container：一个 DOM 元素，您希望将组件渲染到其中。

例如，以下代码演示了如何使用 Portals 将一个 Modal 组件渲染到一个 модальное окно：

import ReactDOM from 'react-dom';

const Modal = () => {
  return (
    <div>
      <h1>Hello, world!</h1>
    </div>
  );
};

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

  return (
    <div>
      <button onClick={() => ReactDOM.createPortal(<Modal />, modalRoot)}>Open modal</button>
    </div>
  );
};

export default App;

当用户点击按钮时，Modal 组件将被渲染到 modal-root 元素中。

优势

使用 Portals 有以下几个优势：

• 它允许您将组件渲染到任何 DOM 节点中，即使该节点不在当前组件的层次结构中。
• 它使您能够创建更模块化的组件，因为您可以将组件渲染到不同的位置，而无需担心父组件的结构。
• 它可以提高性能，因为您可以将组件渲染到离它们需要的数据更近的位置。

注意事项

在使用 Portals 时，需要注意以下几点：

• Portals 只能在客户端渲染。
• Portals 不支持服务器端渲染。
• Portals 不支持热重载。
• Portals 可能会导致一些问题，例如：
  • 样式问题：如果您在父组件中使用样式来设置组件的样式，那么这些样式可能不会应用到通过 Portals 渲染的组件。
  • 事件处理问题：如果您在父组件中使用事件处理程序来处理组件中的事件，那么这些事件处理程序可能不会触发。

总结

Portals 是一种将 React 组件渲染到父组件之外的 DOM 节点的便捷方式。它在某些情况下非常有用，例如：当您想将组件渲染到一个 модальное окно 时，当您想将组件渲染到另一个文档时，当您想将组件渲染到一个影子 DOM 时。在使用 Portals 时，需要注意一些注意事项，例如：Portals 只能在客户端渲染，Portals 不支持服务器端渲染，Portals 不支持热重载，Portals 可能会导致一些问题，例如：样式问题和事件处理问题。