react制作广告弹窗

1、点击按钮（或者在钩子函数中控制）‘打开广告’显示广告遮罩层

2、点击‘X’ 关闭遮罩层

3、设置计时器，自动关闭

4、使用按钮控制倒计时（后续可在钩子函数中控制）

代码如下：

import React, { useState } from "react";

// 广告弹窗


function Ad() {
  const [isShow, setIsShow] = useState(true); // useState局部状态管理
  const [remindTime, setRemindTime] = useState(10);
  // 改变数据的方法，可以接收一个值为参数
  //    还可以接收一个回调函数作为参数
  //    回调函数中会默认传递上一次的值作为数据，返回值为state的新数据

  return (
    <>
      <button
        onClick={() => {
          setIsShow(true);
          setRemindTime(10);
        }}
      >
        打开广告
      </button>
      {isShow ? (
        <div className="ad-container">
          <div className="ad-body">
            <span
              className="btn-close"
              onClick={() => {
                setIsShow(false);
              }}
            >
              X
            </span>
            <p className="r-t">{remindTime}s后自动关闭</p>
            <img
              src="https://img1.360buyimg.com/n6/jfs/t1/174850/33/48194/68956/66f8b452F7d018867/5c2efb17c8d269df.jpg"
              alt=""
            />
            <button
              className="r-btn"
              onClick={() => {
                // setTnterval 计时器
                const timer = setInterval(() => {
                  //   console.log("执行了--" + remindTime);
                  //   setRemindTime(remindTime - 1);

                  setRemindTime((v) => {
                    // v 是上一次的返回值
                    // 返回的值会作为新值接收
                    if (v > 0) {
                      return v - 1;
                    }
                    clearInterval(timer);
                    setIsShow(false);
                    return 0;
                  });
                }, 1000);
              }}
            >
              开始计时
            </button>
          </div>
        </div>
      ) : null}
    </>
  );
}

export default Ad;

css样式:

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

// 整个容器
.container {
  width: 100vw;
  height: 100vh;
}

.ad-container {
  width: 100vw;
  height: 100vh;

  // 设置Ad.tsx容器为固定容器，不会随着页面滚动而滚动
  position: fixed; //固定定位
  top: 0; // 固定在左上角
  left: 0;
  background-color: #00000039;

  display: flex; // 开启弹性盒布局
  align-items: center; // 侧轴对齐方式
  justify-content: center; // 主轴对齐方式

  .ad-body {
    position: relative; // 相对布局

    // 关闭按钮
    .btn-close {
      position: absolute; // 开启绝对定位
      top: 8px;
      right: 8px;
      color: red;
    }

    // 倒计时
    .r-t {
      position: absolute;
      top: 8px;
      right: 2rem;
      color: red;
    }

    // 开始计时按钮
    .r-btn {
      position: absolute;
      bottom: 8px;
      right: 8px;
      background-color: rgba(0, 0, 255, 0.575);
      color: #fff;
      padding: 2px;
    }
  }
}

新人自学中......