反应中全局可访问的模态组件

Question

我正在努力寻找一种巧妙的方法来实现可从我的应用程序中的任何位置访问的模态。

我想避免isOpen在每个具有模态的组件中都有一个本地状态，因为一次只能看到一个模态。我还想避免必须向所有组件发送道具，因为不确定将来应该能够从哪些组件激活模态。

我尝试用 Redux 解决它，在我的顶级组件中实现了一个基本模态组件App，然后在 Redux 中存储isOpen和component在一个模态子状态中，但这引入了很多问题，因为每次用户交互时都必须更新该组件模态。

我也尝试使用 React 16 的 Portals，但它似乎不适合我的需求。帮助表示赞赏。这里有什么想法或最佳实践吗？

Answer 1

看看react-semantic-ui中modals的实现，modal是通过body root中的portal实例化的自我管理组件。如果您想在应用程序中的任何位置访问它，只需对其进行引用并将其传递给您的组件三即可。