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

Question

我只有一个页面的React应用。 App.js根据来自服务器的信息来决定显示哪个页面。有一个秒表组件，仅用其中两个页面呈现。这是来自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，这是return的App.js函数的render：

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

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