0

这是场景：我有一个从 60 计数到 0 的计时器，当它完成时（它为 0），用户可以选择一个按钮（位于父组件中）来重新启动计数器。现在 Timer 有一个 onFinish 属性，它在定时器完成后执行，我在其中增加 key 属性以重新创建 Timer 组件。像这样：

import React from 'react';

let counter = 0;
const timerDuration = 59;


const SMSConfirmation: React.FC = () => {


    const [timerFinished, setTimerFinished] = useState<boolean>(false)   

    const onTimerFinish = () => {
        setTimerFinished(true);
    }

    const restart = () => {
        setTimerFinished(false);
        counter++;
    }

    const handleButtonClick = () => {
        if (timerFinished) restart();
    }

    return (
        <div>

            <Timer key={counter}
            duration={timerDuration}  
            onFinish={onTimerFinish} />

            <Button onClick={handleButtonClick} />
        </div>
    )
}

export default SMSConfirmation;

另一种方法是使 Timer 组件受控并具有 onChange 道具。考虑到我只需要知道计时器何时完成并且不需要每秒的确切值，我使用了第一种方法，但这似乎有点像一个不好的做法，因为我很少看到这种方法。

你怎么看？

4

1 回答 1

0

在我看来，更好的方法是在每个滴答声中存储计时器状态并更新绑定到计时器的状态，这样您就不会重新创建任何内容，只需重置状态并重新开始

于 2019-11-16T09:40:27.040 回答