React portal:在同一个domNode父级内托管多个？

Question

React最近添加了Portal功能,有效地将虚拟DOM的子树翻录并将其放置在物理DOM的其他位置.

render() {
  // React does *not* create a new div. It renders the children into `domNode`.
  // `domNode` is any valid DOM node, regardless of its location in the DOM.
  return ReactDOM.createPortal(
    this.props.children,
    domNode,
  );
}

如果每个门户网站必须独立存在,则不清楚文档domNode.

注意:截至2017年2月11日的当前实施允许在单个内部托管多个门户domNode.这是来自React文档的原始CodePlex演示的分支,将两个门户推送到一个父节点:

https://codepen.io/anon/pen/WXYNpE

但这是一个实现怪癖,还是设计？

Answer 1

在 Portal 中将其视为 \xe2\x80\x9cteleporter\xe2\x80\x9ddomNode

\n

门户不需要位于自己的 domNode 上。门户的想法不是重复创建新的 domNode 并在其上插入 JSX 或类似的东西。

\n

解释一下React 文档：

\n

门户仅更改 DOM 节点的物理位置。在所有其他方式中，您渲染到门户中的 JSX 充当渲染它的 React 组件的子节点。例如，子级可以访问父级树提供的上下文，事件根据 React 树从子级冒泡到父级。

\n

使用示例，在 body 标签上渲染段落：

\n

{ createPortal(\n  <p>This child is placed in the document body.</p>,\n  document.body\n) }\n

\n