首页 文章

React Portals解决了什么？

提问于
浏览 次
0

我是新来的反应和JS .

来自反应门户的文档：

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

建议的解决方案是使用：

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

我不明白它解决了什么 . 为什么 Container1 的 Child1 孩子而不是 Parent1 有帮助？

我的问题可能不清楚，如果不是 - >这个解决方案与创建“对话框，hovercards和工具提示”的其他解决方案有何不同？

javascript reactjs modal-dialog

2 回答

  • 0

    在React V15中，我们只能将子dom添加到父dom中 . 这意味着，如果你想拥有一个元素，你必须创建一个新的div . 就像这样：

    <div>
    {this.props.children}
</div>

    在React v16中，不需要创建新的div . 我们可以使用portal将children元素添加到dom树中的任何dom .

    ReactDOM.createPortal(
    this.props.children,
    domNode
  );

    溢出：隐藏或z-index样式

    如果父组件具有溢出：隐藏或z-index样式，并且子元素类型是对话框，hovercards，工具提示等，则这些应该位于父元素的上层，这意味着突破 . 但它们可能是阴影由父亲组成 .

    因此createPortal提供了一个更好的选项 . 它可以加载父组件的上部组件 . 将元素安装到另一个dom之后，它将不会受到保护 .

    事件和泡沫破灭

    即使是安装在另一个组件上的组件，事件也可以发送到父组件 .

    回复于
  • 0

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

    但是，有时您需要控制一些React组件在不同的 DOM 元素下呈现，并与您现有的React应用程序进行交互 . 在这种情况下，React Portals非常方便 .

    当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 元素 . 这可以通过门户网站轻松完成 .

    这是Portals的解决方案 .

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

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

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

    这样， ModalRenderer 决定了 Modal 的容器元素，它独立于您的应用程序树 .

    回复于

相关问题