如何将模态放在react-navigation root中？

Question

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

Answer 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"),
  );
}

供参考Portals documentation