React has recently added Portal feature, effectively ripping a sub-tree of virtual DOM out and placing it elsewhere in physical 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,
  );
}

Documentation is not clear if each portal must live in its own domNode.

NOTE: the current implementation as of 11-Feb-2017 does allow multiple portals hosted inside single domNode. Here's a fork of original CodePlex demo from React's docs, pushing two portals into one parent node:

But is this an implementation quirk, or by design?

React has recently added Portal feature, effectively ripping a sub-tree of virtual DOM out and placing it elsewhere in physical 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,
  );
}

Documentation is not clear if each portal must live in its own domNode.

NOTE: the current implementation as of 11-Feb-2017 does allow multiple portals hosted inside single domNode. Here's a fork of original CodePlex demo from React's docs, pushing two portals into one parent node:

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

But is this an implementation quirk, or by design?

• javascript
• reactjs

2 Answers 2

If the portal container is from outside React, both these ments by Dan Abramov (on an issue about a different topic anyway) as well as the examples in the official docs (where they usually use document.body as the container, despite it also containing React's root) seem to imply it is expected that you can render multiple portals inside the same node (without replacing what was already there).

• This issue is not about two portals rendering to one node, it is about a portal rendering to a node already managed by a regular React ponent.

• And what if you have multiple portals rendering into the same node? Now that could bee really confusing. You have no way to trace which one es from where.

  So I would prefer if we forced you to pletely get out of “React-land” when creating a portal container.

However, based on some other ments from Dan, this might have been accidental when the portal container is inside React, where it looks like the proposed (not current) behavior would be to replace what's already in the container (thus, not allowing multiple portals to render in it at the same time).

• I'm sure what the expectation is here, to be honest.

  I think if should work similar to ReactDOM.render which does replace the content: https://codesandbox.io/s/mxmrxnknp

  My slides explore the problems that can be solved by totally misusing portals.

Anyway, this seems to be an open discussion so I would encourage you to go to that GitHub issue and make your own conclusions. Or, even better, ment there about your use case, expectations and needs.

Note that while that issue is not exactly what you asked for, it is related, and a change to address the behavior of portals rendered inside containers from within React might also affect how they behave with containers from outside React (maybe replacing the container content altogether in both cases?).

Think in Portal as a “teleporter” to this domNode

Portals do not need to be on their own domNode. The idea of portals is not repetitively create new domNodes and insert on it a JSX or something like that.

Paraphrasing the React Documentation:

A portal only changes the physical placement of the DOM node. In every other way, the JSX you render into a portal acts as a child node of the React ponent that renders it. For example, the child can access the context provided by the parent tree, and events bubble up from children to parents according to the React tree.

Example of usage, rendering a paragraph on body tag:

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