javascript - 如何在我的 React 应用程序中使用 React-compound-timer

Question

我想向我的 React 应用程序添加一个计时器组件，并且我找到了一个我正在尝试使用的包:https://www.npmjs.com/package/react-compound-timer

我对使用 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>

1.) “开始、恢复、暂停、停止、重置、timerState”从何而来？
2.) 我如何在 <Timer> 之外调用“start”函数？例如，如果我在另一个组件中实现了自己的开始按钮？

Answer 1

看起来像Timer是 higher order component .

1.) “开始、恢复、暂停、停止、重置、timerState”从何而来？Timer 组件返回一个新组件，这些就是 props。

2.) 我如何在 之外调用“start”函数？例如，如果我在另一个组件中实现了自己的开始按钮？我不确定你可以。您也许可以扩大 Timer 的范围组件并将更多内容(如开始按钮)放入 <React.Fragment> 中.