React Hook实现对话框组件

React Hook实现对话框组件

准备

• 思路：对话框组件是有需要的时候希望它能够弹出来，不需要的时候在页面上是没有任何显示的，这就意味着需要一个状态，在父组件点击按钮或其他的时候能够更改+ 它并显示，同时子组件（对话框组件）点击关闭的时候也需要更改这个状态。
  进阶：为对话框组件背景添加蒙皮，当对话框内容需要滚动时限制浏览器页面的滚动。
• React Hook 主要用到了 useState，useContext，useContext 主要用于将父组件的 setStatus 传递给子组件以至于它可以更新状态。

附上 Dialog 和 DialogMain组件代码，其中DialogMain 为父组件，使用时只需将其挂载至 App.js。

代码

DialogMain 父组件代码

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 <Dialog />;
        else return null;
    }
    //打开函数
    function openDialog() {
   
        //打开时禁止浏览器外面的滚动,注释掉这行鼠标在对话框外面时可以滚动浏览器界面
        document.body.style.