React Hook实现对话框组件_React_

import React from "react"; import Dialog from "./dialog"; //初始化 Context export const StatusContext = React.createContext(); const DialogTest = () => {     //设置状态控制对话框的打开与关闭     const [status, setStatus] = React.useState(false);     //条件渲染,符合条件返回 Dialog 组件否则返回 null     function GetDialog() {         if (status) return 
;         else return null;     }     //打开函数     function openDialog() {         //打开时禁止浏览器外面的滚动,注释掉这行鼠标在对话框外面时可以滚动浏览器界面         document.body.style.overflow = "hidden";         setStatus(true);     }     return (         
             {/* 按钮绑定打开函数 */}             打开对话框             {/* 使用 Context 的 Provider 暴露 setStatus 方法 */}                                                    
     ); }; export default DialogTest;

import React from "react"; import { StatusContext } from "./dialogMain"; const Dialog = (props) => {     //利用解构赋值将 setState 从 useContext分离出来     const { setStatus } = React.useContext(StatusContext);     //关闭时更改 Status 状态为 false     function uninstallDialog() {         setStatus(false);         //关闭时重新将浏览器界面设置为滚动或其他         document.body.style.overflow = "scroll";     }     // 点击蒙层本身时关闭对话框，点击对话框的内容时不关闭     function handleClick(event) {         if (event.target === event.currentTarget) {             //调用关闭的方法             uninstallDialog();         }     }     return (         // 为整个组件添加css 样式并让其置于顶层,同时对话框意外的地方添加模糊效果         
             {/* 为对话框添加 css 样式,absolute定位时相对于容器的位置 ,同时将 overflow 设置为自动*/}             
                 {/* 为关闭按钮绑定关闭方法 */}                 关闭                 对话框对话框对话框对话框对话框对话框对话框对话框对话框对话框对话框对话框对话框对话框对话框对话框对话框对话框对话框对话框对话框对话框对话框                 对话框对话框对话框对话框对话框对话框对话框对话框对话框对话框对话框对话框对话框                 对话框 对话框 对话框 对话框 对话框 对话框 对话框 对话框 对话框             
         
     ); }; export default Dialog;

import "./App.css"; import DialogMain from "./component/dialogTest/dialogMain"; function App() {     return (         
             
                              
         
     ); } export default App;