实现一个倒计时组件

96 阅读1分钟

import React, { useState, useEffect } from 'react';
import ReactDom from 'react-dom';


interface IcountDownProps{
  seconds?:number;
}
const CountDown = function (props:IcountDownProps) {
  const {seconds=0} = props;
  const [count, setCount] = useState(seconds);

  useEffect(()=>{
    if(count > 0){
      let timmer = setInterval(()=>{
        setCount(count-1);
      },1000)
      return (()=>{
        clearInterval(timmer)
      })

    }
  },[count])
  console.log('render')

  if(count <= 0){
    return <div><label>倒计时结束</label></div>
  }
  else{
    return <div><label>{count}</label></div>
  }
};

ReactDom.render(<CountDown seconds={10}/>, document.getElementById('app'));