reactjs - React 中全局可访问的模态组件

Question

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

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

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

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

Answer 1

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