时间戳

首页 > 解决方案 > React Portal 解决了什么问题？

javascript - React Portal 解决了什么问题？

问题描述

来自反应门户的文档：

门户的典型用例是父组件具有溢出：隐藏或 z-index 样式，但您需要子组件在视觉上“突破”其容器。例如，对话框、悬停卡片和工具提示。

建议的解决方案是使用：

// this line is rendered in `Portal1` component,
// which is rendered in `Parent1` component.
ReactDOM.createPortal(Child1, Container1)

我不明白它解决了什么问题。为什么让Child1孩子Container1代替而不是Parent1帮助？

我的问题可能不清楚，所以如果没有 -> 此解决方案与创建“对话框、悬停卡和工具提示”的其他解决方案有何不同？

标签： javascriptreactjsmodal-dialog

解决方案

当你初始化一个 React 应用程序时，ReactDOM告诉一个DOM容器它的所有 React 组件都将在 this 下呈现DOM。这使得 React 做所有的渲染处理。

有时您需要控制 React 组件作为子元素呈现给不同的DOM元素，并继续与您的 React 应用程序交互。这就是我们使用 React Portal 的原因

由于 React 在后台创建虚拟元素，因此您无法将转换为DOM元素并将它们直接插入到DOM. React Portals 允许你传递一个 React Elements 并为 React Element 指定容器 DOM

这是一个例子：

您有一个在中心Modal呈现div元素的组件。

function Modal() {
  return (
      <div style={{ position: 'absolute', left: '50%'}}>
          Message
      </div>
  );
}

将您的Modal组件放在div相对位置内。

<div style={{ position: 'relative', left: 100 }}>
  <Modal />
</div>

问题是当Modal组件被渲染时，它的位置是相对于 parentdiv的位置，但你需要将它显示在窗口的中心。

为了解决这个问题，您可以使用门户Modal直接将组件附加到元素body

这是 Portals 的解决方案。

function ModalRenderer() {
  return (
      React.createPortal(
         <Modal />,
         document.body
      )
  );
}

ModalRenderer并在应用程序中的任何地方使用组件。

<div style={{ position: 'relative', left: 100 }}>
  <ModalRenderer />
</div>

ModalRenderer容器元素Modal位于 DOM 树之外，但仍在 React 应用程序树中

推荐阅读