如何使用 React 创建覆盖层?

Question

我正在尝试制作一个叠加层，当我单击菜单按钮时会出现该覆盖层，并在单击页面上的任意位置时关闭。但是当我点击按钮时没有任何反应。

我仍然是 React Hooks 的新手，所以如果我犯了明显的错误，我希望你能理解。

这是我的代码：

应用.js

import React from "react";
import ReactDOM from "react-dom";
import "./styles.css";
const modalRoot = document.getElementById("modal-root");
const Modal = props => {
return ReactDOM.createPortal(
<div className="overlay">{props.children}</div>,
modalRoot
);
};
export default function App() {
const [open, setOpen] = React.useState(false);
return (
<div className="App">
<button onClick={() => setOpen(!open)}>Menu</button>
{open && <Modal in={open}>Click anywhere to close</Modal>}
</div>
);
}

应用.css

body {
font-family: sans-serif;
}
.App {
position: relative;
text-align: center;
}
* {
box-sizing: border-box;
}
.overlay {
position: fixed;
display: none;
width: 100%;
height: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.5);
cursor: pointer;
}

这是代码沙盒的链接

Answer 1

在styles.css中，您将 CSSdisplay属性设置为none。这应该更改为display: block。

然后，仅当open的值为true时，才会显示模态。

Answer 2

您可能已经找到了答案，但您需要更改显示：无以显示：阻止，然后使用可见性：隐藏(当模态关闭时(和可见性：模态打开时可见