如何将模态放入反应导航根目录？

【问题标题】：How to put modal in react-navgation root?如何将模态放入反应导航根目录？
【发布时间】：2018-06-03 19:52:41
【问题描述】：

如上图所示，我想在我的根应用程序中放置一个模态，然后我可以随时随地控制模态显示，但问题是 modalClass 应该放在哪里。

【问题讨论】：

【解决方案1】：

React 16 中引入了一个名为Portals 的功能，旨在准确处理此类情况。

像这样在index.html 文件中添加一个条目（modal-root）

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

然后渲染到模态DOM元素中

render() {
  return ReactDOM.createPortal(
    this.props.children,
    document.getElementById("modal-root"),
  );
}

供参考传送门documentation

【讨论】：