Javascript 如何在我的react应用程序中使用react复合计时器

我想将计时器组件添加到我的React应用程序中，我发现了一个我正在尝试使用的软件包：

我对使用React相当陌生，我很难理解下面提供的示例：

<Timer
    initialTime={55000}
>
    {({ start, resume, pause, stop, reset, timerState }) => (
        <React.Fragment>
            <div>
                <Timer.Days /> days
                <Timer.Hours /> hours
                <Timer.Minutes /> minutes
                <Timer.Seconds /> seconds
                <Timer.Milliseconds /> milliseconds
            </div>
            <div>{timerState}</div>
            <br />
            <div>
                <button onClick={start}>Start</button>
                <button onClick={pause}>Pause</button>
                <button onClick={resume}>Resume</button>
                <button onClick={stop}>Stop</button>
                <button onClick={reset}>Reset</button>
            </div>
        </React.Fragment>
    )}
</Timer>

{（{开始、恢复、暂停、停止、重置、timerState}）=>(
天
小时
会议记录
秒
毫秒
{timerState}


开始
暂停
简历
停止
重置
)}

1.“启动、恢复、暂停、停止、重置、计时器状态”从何而来？

---

2.）如何在

之外调用“启动”函数？例如，如果我在另一个组件中实现了自己的启动按钮？

看起来像是计时器

1.“启动、恢复、暂停、停止、重置、计时器状态”从何而来？ 计时器组件返回一个新组件，这些是道具

2.）如何在外部调用“启动”函数？例如，如果我在另一个组件中实现了自己的开始按钮？

---

我不确定你能不能。您可能可以扩展

计时器

组件的范围，并在

中放置更多（如启动按钮）启动功能作为道具传入

const handleStart = () => {
  // code to handle start in here.
} 

你可以这样称呼它：

<Timer start={handleStart) ...rest of props />

计时器组件可以这样调用

 <Timer start={handlePressStartButton} 
        pause={handlePressPauseButton}
        resume={handlePressResumeButton}
        stop={handlePressStopButton}
        reset={handlePressResetButton} />

然后，您可以简单地在所有handlePress函数中最初放置一个console.log。你甚至可以随意称呼他们

1.“启动、恢复、暂停、停止、重置、计时器状态”从何而来？

---

当您使用此组件时，可以提供它们。您可以在子组件中的任何位置使用组件。从代码的开始，您可以看到RenderOps是如何传递给计时器组件的子级的。只是不工作。您好。很抱歉，我现在看到了我在这里写的无知的错误。让我纠正一下。希望这些编辑能有所帮助。祝你好运

 <Timer start={handlePressStartButton} 
        pause={handlePressPauseButton}
        resume={handlePressResumeButton}
        stop={handlePressStopButton}
        reset={handlePressResetButton} />