我可以在我的 React 应用程序中渲染 React-Portal 吗？

Question

我使用 React 16。我想像这样在我的应用程序中呈现门户：

<html>
  <body>
    <div id="app-root">
      <div>...My app stuff</div>
      <div id="modal-root">... portal stuff</div> <-- portal content
    </div>
  </body>
</html>

但官方文档建议在旁边而不是在应用程序中呈现门户。

<html>
  <body>
    <div id="app-root"></div>
    <div id="modal-root"></div>
  </body>
</html>

这是使用门户的唯一正确方法吗？

Answer 1

门户的想法是你可以在 DOM 树中的任何地方渲染它，你只需要一个有效的 DOM 节点来渲染它，它不是下一个必需的至 app-root

根据文档

However, sometimes it’s useful to insert a child into a different location in the 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,
  );
}

我可以在我的 React 应用程序中渲染 React-Portal 吗？

May i render the react-portal inside my react application?

portal

reactjs