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

Question

从 react 门户的文档:

A typical use case for portals is when a parent component has an overflow: hidden or z-index style, but you need the child to visually “break out” of its container. For example, dialogs, hovercards, and tooltips.

建议的解决方案是使用:

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

我不明白它解决了什么问题。为什么要制作 Child1 Container1 的 child 而不是 Parent1有帮助吗？

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

Answer 1

当你初始化一个 React 应用程序时，ReactDOM告诉一个DOM其所有 React 组件都将在此 DOM 下呈现的容器.这使得 React 完成所有渲染处理。
有时你需要控制一个 React 组件作为子组件渲染到不同的 DOM元素，并继续与您的 React 应用程序交互。这就是我们使用 React Portals 的原因
由于 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组件被渲染，它的位置是相对于父级 div的位置，但您需要将其显示在窗口的中心。
为了解决这个问题，你可以附加你的 Modal组件直接发送到 body带有门户的元素
这是门户的解决方案。

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

并使用 ModalRenderer应用程序内任何位置的组件。

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

ModalRenderer具有 Modal 的容器元素它在 DOM 树之外，但仍在 React 应用程序树内