弹出React最佳实践

Question

我尝试使用React + Redux + React路由器实现可以在Web应用程序的任何屏幕上显示的弹出窗口

popover是一个容器，由应用程序状态触发。

但是最好的做法是如何做这样的事情，因为背景是透明的，它应该只显示在当前呈现的任何屏幕上。

它应该在路由器的顶部，隐藏还是取消隐藏？我似乎能找到这个场景的任何例子......

Answer 1

Popover可以位于Root组件中，就像这样。

<App>
  <HomePage />
  {shouldShowPopOver && <PopOver />}
</App>

您可以在任何地方发送{ type: TOGGLE_POPOVER }操作，以更改shouldShowPopOver。样式（透明，整页等）应该通过css完成。

Answer 2

您可以使用 react-bootstrap 弹出窗口。查看链接 https://react-bootstrap.github.io/components.html#popovers

Answer 3

我正在使用react-modal组件，效果非常好。

Answer 4

之前我使用过react-modal-dialog，它就像一个魅力！这个库的好处是你可以定义你的<Modal>组件靠近触发源的位置（某个按钮？），并且很容易跟踪确定是否显示模态的条件，因为它接近触发器源。

使用这个库，从技术上讲，将模态组件放在标记中的位置并不重要，因为模态的CSS使其显示在所有其他元素之上。