Javascript 如何在完成后重置计时器组件_Javascript_Reactjs_Ecmascript 6_Timer

Javascript 如何在完成后重置计时器组件

javascript reactjs ecmascript-6 timer

Javascript 如何在完成后重置计时器组件,javascript,reactjs,ecmascript-6,timer,Javascript,Reactjs,Ecmascript 6,Timer,我正在尝试使用react countdown now包构建计时器组件：我很难重新设置计时器，使其转到时间表上的下一个时间我一直在尝试在道具中使用key属性，它在等待的时间数组中传递它（它在文档中）。实际上，我会从服务器端方法中获取这些计划值目前我有组成部分： <Countdown date={Date.now() + 5000} key = {timeDelays} intervalDelay={0} precision={3} r

我正在尝试使用react countdown now包构建计时器组件：

我很难重新设置计时器，使其转到时间表上的下一个时间

我一直在尝试在道具中使用key属性，它在等待的时间数组中传递它（它在文档中）。实际上，我会从服务器端方法中获取这些计划值

目前我有

组成部分：

<Countdown
     date={Date.now() + 5000}
     key = {timeDelays}
     intervalDelay={0}
     precision={3}
     renderer={timerRenderer}
/>

支持功能和价值观：

//These time values are most probably going to be in JSON format, 
//and probably will contain EPOCH times for scheduled events

const timeDelays = [2000,4000,3000,15789,2345794];

// Random component
const Completionist = () => <span>You are good to go!</span>;

// Renderer callback with condition
const timerRenderer = ({ hours, minutes, seconds, completed }) => {
     // if (completed) {
        //     Render a completed state
        //     return <Completionist />;
     // } else {
     //     // Render a countdown
            return <span>{hours}:{minutes}:{seconds}</span>;
     //}
};

//这些时间值很可能是JSON格式的，
//并且可能包含预定事件的纪元时间
常数时间延迟=[200040003000157892345794]；
//随机分量
const Completionist=（）=>你可以走了！；
//带条件的渲染器回调
常量计时器指示器=（{小时，分钟，秒，完成}）=>{
//如果（已完成）{
//呈现完成状态
//返回；
//}其他{
////倒计时
返回{hours}:{minutes}:{seconds}；
//}
};

我希望它从列表中的倒计时开始，然后在完成后从列表中移到下一个计划值。

这与前一个答案完全不同，前者使用基于类的组件

首先，我们需要将react和react钩子导入到我们的组件文件中

import React, { useState } from 'react';

接下来，我们将声明一个react函数组件，并使用react钩子来维护状态

function MyCountdownTimer({ times }) {
    // a hook for the current time index
    const [currentTimeIndex, setCurrentTimeIndex] = useState(0);
    // a hook for the current time
    const [currentTime, setCurrentTime] = useState(null);
    // return a render
    return (
        <Countdown
            date={currentTime}
            key={currentTimeIndex}
            onComplete={() => {
                // dont's move to next time if just done with last time
                if(times.length - 1 <= times.indexOf(currentTime)) return;
                // move to next time index
                setCurrentTimeIndex(currentTimeIndex + 1);
                // reset current time
                setCurrentTime(new Date(times[currentTimeIndex + 1]));
            }}
            renderer={({ hours, minutes, seconds, completed }) => {
                // render completed
                if (completed) return <span>You are good to go!</span>;
                // render current countdown time
                return <span>{hours}:{minutes}:{seconds}</span>;

            }}
        />
    );
}

函数MyCountdownTimer（{times}）{
//当前时间索引的挂钩
常数[currentTimeIndex，setCurrentTimeIndex]=useState（0）；
//当前的钩子
const[currentTime，setCurrentTime]=useState（null）；
//返回渲染
返回(
{
//如果上一次刚做完，就不要再去下一次了
如果（乘以长度-1{
//渲染完成
如果（完成）返回，您就可以开始了！；
//渲染当前倒计时时间
返回{hours}:{minutes}:{seconds}；
}}
/>
);
}

这样的实现看起来是这样的

let times = [...] // an array of times

<MyCountdownTimer times={times} />

let times=[…]//一个时间数组

React钩子仍然有点新，所以为了更好地理解React钩子，您可以遵循以下链接

注意

您需要一种方法来告诉您当前的时间，以便在组件中有两件事。时间列表（

时间

）作为一个数组，应该按照上面代码中的建议作为道具传递，当前时间的索引（

currentTimeIndex

）作为整数和当前时间（

currentTime

）作为日期对象

您需要使用

onComplete

属性来定义回调方法来侦听计时器何时达到零，我们不会在倒计时计时器完成时更新组件的状态

倒计时组件上的一个键属性，它意味着每次要重置倒计时计时器时都会发生更改，并且由于我们正在增加索引以转到下一次，因此我们将只使用当前时间的索引

我减少了渲染器的代码，这样您就可以在同一个函数中渲染所需的内容，除非您将在其中添加更多的代码

这是使用具有的功能组件来维护状态

function MyCountdownTimer({ times }) {
    // a hook for the current time index
    const [currentTimeIndex, setCurrentTimeIndex] = useState(0);
    // a hook for the current time
    const [currentTime, setCurrentTime] = useState(null);
    // return a render
    return (
        <Countdown
            date={currentTime}
            key={currentTimeIndex}
            onComplete={() => {
                // dont's move to next time if just done with last time
                if(times.length - 1 <= times.indexOf(currentTime)) return;
                // move to next time index
                setCurrentTimeIndex(currentTimeIndex + 1);
                // reset current time
                setCurrentTime(new Date(times[currentTimeIndex + 1]));
            }}
            renderer={({ hours, minutes, seconds, completed }) => {
                // render completed
                if (completed) return <span>You are good to go!</span>;
                // render current countdown time
                return <span>{hours}:{minutes}:{seconds}</span>;

            }}
        />
    );
}

文档中的日期可以是日期对象

希望这有助于回答您的问题。

这与以前的答案完全不同，后者使用了基于类的组件