react倒计时组件封装

以下是一个简单的React倒计时组件的示例代码：

import React, { useState, useEffect } from 'react';
 
const CountdownTimer = ({ seconds, onComplete }) => {
  const [timeLeft, setTimeLeft] = useState(seconds);
 
  useEffect(() => {
    let intervalId = null;
 
    if (timeLeft > 0) {
      intervalId = setInterval(() => {
        setTimeLeft(prevTimeLeft => prevTimeLeft - 1);
      }, 1000);
    }
 
    if (timeLeft === 0) {
      onComplete();
    }
 
    return () => clearInterval(intervalId);
  }, [timeLeft, onComplete]);
 
  return (
    <div>
      <p>Time Left: {timeLeft} seconds</p>
    </div>
  );
};
 
export default CountdownTimer;

使用方法：

<CountdownTimer seconds={10} onComplete={() => alert('时间到！')} />

这个组件接收两个属性：seconds 和 onComplete。seconds 用于设置倒计时的总秒数，而 onComplete 是一个函数，当倒计时结束时会被调用。组件使用 useState 来跟踪剩余时间，并使用 useEffect 来处理倒计时逻辑。