反应覆盖中的模态答案

【问题标题】：Modals in react-overlays反应覆盖中的模态
【发布时间】：2021-06-13 14:11:23
【问题描述】：

所以...我真的很想在模态中打开一个模态。我一直在盯着 react-overlays 文档，我不明白我应该如何实现它。它似乎不像实现 Modal 标签那么简单。我得到各种各样的错误。背景在实际渲染中是否重要？我需要将道具传递给它吗？

这是文档的链接。 https://react-bootstrap.github.io/react-overlays/api/Modal

有没有人有更好的方法来解释一个人实际需要做什么？

【问题讨论】：

我不明白你所说的模态中的模态是什么意思。
@zero298 我的意思是，我想要一个打开的模态，并在其上打开另一个模态。就像在模态中一样，有一个按钮可以打开另一个模态。
@zero298 看起来像是样式问题，可能是
内的
？
你是否已经死心塌地使用反应覆盖？听起来好像没什么用，但我也不知道他们说dialog-stacking 或easily-pluggable animation 时的意思
@Sam 我可能最终会使用其他东西。我在严重的时间紧缩下工作。无论哪种方式，我都想了解发生了什么。

【解决方案1】：

既然你在 cmets 中提到你可能不会使用 react-overlay 如果你不需要使用 react-overlays，你可以只拥有一个看起来像这样的组件

const Modal = ({children, className, ...props}) => {

    useEffect(() => {
        document.body.classList.add("no-scroll");
        return document.body.classList.remove("no-scroll")
    };

    return (
    
             <div className="modal-background">

                 <div 
                      className={`modal ${className}`} 
                      {...props}
                 >
                      {children}
                 </div>
             </div>


    );

};

.modal-background {
    position: fixed;
    width: 100vw;
    height: 100vh;
    z-index: 2;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgba(0,0,0,0.4);

}

.modal {
    z-index: 3;
}

.no-scroll{
    overflow: hidden;
}

useEffect 在 ccomponent 渲染时向文档正文添加一个无滚动事件，并在组件卸载时将其移除。 modal-background 元素是一个覆盖层，除了 z-index 小于 2 之外，它会禁用其他所有内容的交互。您可以自定义此模式以按照您的意愿行事。它可能不会做dialog-stacking 或easily-pluggable animation，因为我不知道那是什么意思。我试图弄清楚如何将焦点设置为this question中的第一个孩子

【讨论】：

我刚刚意识到模态下的元素可以使用 Tab 键聚焦，所以 react-overlay 的作用可能比我最初想象的要多
我认为 react-overlay 是 react-bootstrap 的基础。我只是希望文档更好。此外，这是一个巧妙的想法。我会记住的。我最终决定放弃做模态的想法。