React Portal解决了什么？

Question

从React Portal的文档中：

门户的典型用例是父组件出现溢出：隐藏或z-index样式，但是您需要子组件以可视方式“脱离”其容器。例如，对话框，悬浮卡和工具提示。

建议的解决方案是使用：

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

---

我不明白它能解决什么。为什么要让Child1孩子Container1代替Parent1帮助？

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

Answer 1

当您初始化React应用程序时，ReactDOM询问一个DOM容器，您所有的React组件将在此容器下呈现DOM。这使得React可以处理所有渲染过程。

但是有时您需要控制一些React组件以在不同的DOM元素下进行渲染并与现有的React应用程序进行交互。在这种情况下，React Portal十分方便。

由于React在底层创建虚拟元素，因此您无法将其转换为DOM元素并将其直接插入DOM。React Portals允许您传递React Elements并为其指定容器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与您的应用程序树无关的容器元素。