react-overlays中的模态

Question

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

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

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

Answer 1

由于您在注释中提到，如果不需要使用react-overlays，则可以不使用react-overlay，因此您可以只使用如下所示的组件

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会在组件呈现时向文档主体添加一个无滚动事件，并在组件卸载时将其删除。modal background元素是一个覆盖层，它将禁用除z-index小于2以外的其他所有内容。您可以自定义此模式以按您所需的方式运行。它可能不会做dialog-stacking或easily-pluggable animation，因为我不知道那是什么意思。我正在尝试弄清楚如何将焦点设置到this question中的第一个孩子上