React: Add a <ReactDOM.Portal /> element

[j-f1]

Do you want to request a feature or report a bug?

I’d like to request a feature.

What is the current behavior?

To create a portal, you currently have to use a function:

function MyComponent(props) {
  return <Foo>
    ...
    {ReactDOM.createPortal(<Bar>
      ...
    </Bar>, myElement)}
  </Foo>
}

What is the expected behavior?

function MyComponent(props) {
  return <Foo>
    ...
    <ReactDOM.Portal target={myElement}>
      <Bar>...</Bar>
    </ReactDOM.Portal>
  </Foo>
}

[sjy]

I would like to make a pr for it, it may take sone time to invesitigate and do some test l.

[sw-yx]

well first of all... do we want it? it definitely looks cleaner but are there any cons?

[gaearon]

I do agree it reads a bit better. I think we mostly intended createPortal to be an experimental API at first but then it turned out to be more necessary than we thought, and we changed it to be "stable" at last minute. So we haven't quite fixed the ergonomics.

However there is a bigger issue of portals not being feature-complete. Ideally we want to add support for server rendering in some way (e.g. by letting the container be a string). We also wanted to support cross-renderer portals. We thought that at that point we would move the API into React namespace since it would no longer be DOM specific.

So I think overall I agree this needs to be done, but I'd prefer to do it at the same time as other changes, and just make it React.Portal. I don't think those other changes are trivial though, and will require discussion.

[gaearon]

I'm going to close this in favor of https://github.com/facebook/react/issues/10711.

[j-f1]

How are these related @gaearon?

[gaearon]

From my reply above:

However there is a bigger issue of portals not being feature-complete. Ideally we want to add support for server rendering in some way (e.g. by letting the container be a string). We also wanted to support cross-renderer portals. We thought that at that point we would move the API into React namespace since it would no longer be DOM specific.

So I think overall I agree this needs to be done, but I'd prefer to do it at the same time as other changes, and just make it React.Portal. I don't think those other changes are trivial though, and will require discussion.

https://github.com/facebook/react/issues/10711 is the issue tracking "isomorphic" portals (at which point we might as well make them more ergonomic to use).