React倒计时组件

定义：

components/CountDown/index.tsx

import React, { useState, useEffect } from 'react';
import style from './index.scss';
import classnames from 'classnames';

const CountDown: React.FC<
  {
    onCountDown: () => void;
    // ?表示非必填参数
    isNotshowText?: boolean;
    seconds?: number;
  } & React.HTMLAttributes<HTMLElement>
> = function CountDown(prop) {
  let [seconds, setSeconds] = useState(prop.seconds || 120);

  useEffect(() => {
    let timeoutId = setTimeout(() => {
      if (seconds == 1) {
        clearTimeout(timeoutId);
        prop.onCountDown();
      } else {
        setSeconds(seconds - 1);
      }
    }, 1000);
  }, [seconds]);

  return (
    <span className={classnames(style.top, prop.className)}>
      {prop.isNotshowText ? `` : '剩余'} <span> {seconds}秒</span>
    </span>
  );
};

export default CountDown;

使用：

page/index.tsx

import { Modal } from 'antd';
import CountDown from '../../components/CountDown';

...
    return(
        <>
            ...
            <Modal
            visible={openThisModal}
            footer={[
              <div>
                <Button onClick={closeThisModal} className={style.cancleQr}>
                  返回
                </Button>
                <Button
                  onClick={ToPay}
                  type="primary"
                  className={style.qr}
                  loading={BuildAppointId.loading}
                >
                  确认
                </Button>
              </div>,
            ]}
            title={[
              <div>
                <span className={styleScss.title1}>ant 对话框</span>
              </div>,
            ]}
            mask={false}
            className={styleScss.SureModal}
            // 关闭对话框时让倒计时清零
            destroyOnClose={true}

            closable={true}
            closeIcon={
              <CountDown
              onCountDown={() => closeThisModal()}
              className={style.fontColor2}
              seconds={30}
            />
            }
            width={850}
            >
                {/* 对话框内容 */}
                ...
            </Modal>
            ...
        </>
    )
...