React组件-未渲染时也继续工作

Question

我有一个单页React应用程序。根据来自服务器的信息，App.js决定显示哪个页面。有一个Stopwatch组件，它只呈现了其中的2页。这是来自App.js:的代码

render() {
switch (this.state.patientState) {
case statesEnum.WAITING:
main = <WaitingPage socketClient={this.socketClient} />;
break;
case statesEnum.TURN_ARRIVED:
main = <TurnArrivedPage />;
break;
case statesEnum.END:
return <EndPage />; // Because we don't need a stopper here...
default:
return <h1>Error...</h1>;
}
return (
<main>
<Stopwatch initialSeconds={this.state.seconds} initialMinutes={this.state.minutes} initiallHours={this.state.hours} />
{main}
</main>
);
}

但我希望塞子继续计数，即使它没有在屏幕上呈现。我能做什么？

谢谢！

Answer 1

所以感谢@developer，这是App.js的render函数的return：

return (
<main>
<StopwatchManager
showStopwatch={showStopwatch}
initialSeconds={this.state.stopwatchInitialData.seconds}
initialMinutes={this.state.stopwatchInitialData.minutes}
initialHours={this.state.stopwatchInitialData.hours}
/>
{main}
</main>
);

StopwatchManager包含秒表的所有功能。它总是进行渲染，但它决定通过showStopwatch道具实际显示秒表。