如何在React 16中使用ReactDOM.createPortal（）？

Z时代
2024-01-10
分类：问答

我正在使用React 16，并且需要门户网站，但是无法找到有关此功能的任何文档。有人知道怎么使用吗？

https://github.com/facebook/react/pull/10675

感谢您的任何建议。

回答：

React

v16刚刚发布了几个小时（正式版），正式支持Portal。

门户网站提供了一种一流的方式来将子级呈现到父组件的DOM层次结构之外的DOM节点中。

Portal在React社区中不是新概念。有许多支持这种功能的库。例如react-

portal和react-

gateway。

通常，在渲染任何React应用程序时，单个DOM元素用于渲染整个React树。

class HelloReact extends React.Component {
render() {
       return (
          <h1>Hello React</h1>
       );
   }
}
ReactDOM.render(<HelloReact />, document.getElementById('root'));

如您所见，我们正在将我们的react组件渲染为一个具有id的DOM元素root。

门户网站是一种在父组件的主DOM层次结构之外呈现React子代

。我强调这一点是因为非常流行的库，例如react-router，redux大量使用了react上下文。因此，使用时的上下文可用性Portal非常有帮助。

根据反应文档，

门户的典型用例是父组件发生溢出：隐藏或z-index样式，但是您需要子组件以可视方式“脱离”其容器。例如，对话框，悬浮卡和工具提示。

因此，使用门户网站时，您可以在需要时将并行反应树渲染到另一个DOM节点上。即使将其呈现在不同的DOM节点中，父组件也可以捕获未捕获的事件。请参阅文档本身中提供的此Codepen。

下面的示例应该给您更多的想法：

// index.html
<html>
    <body>
        <div id="root"></div>
        <div id="another-root"></div>
    </body>
</html>
// index.jsx
const mainContainer = document.getElementById('root');
const portalContainer = document.getElementById('another-root');
class HelloFromPortal extends React.Component {
    render() {
         return (
           <h1>I am rendered through a Portal.</h1>
         );
    }
}
class HelloReact extends React.Component {
    render() {
        return (
             <div>
                 <h1>Hello World</h1>
                 { ReactDOM.createPortal(<HelloFromPortal />, portalContainer) }
             </div>
        );
    }
}
ReactDOM.render(<HelloReact />, mainContainer);