使计时器在组件之间保持同步

Question

一些背景知识：我正在尝试学习 React 并正在使用 next 构建一个小应用程序（使用我之前做过的教程中的模板）。我最近运行遇到一个问题，我需要在两个不在同一层次结构中的组件之间保持计时器同步。

我有一个 Item 组件，它以更简洁的方式显示有关该项目的一些详细信息（描述、标题等）（一个仅显示整个项目信息的一部分的磁贴）。如果我单击 Item 磁贴，我有一个 next.js Link 组件，如下所示：

 <Link href={{pathname: "/item", query: { id: item.id }}}>
    <a>{item.title}</a>
 </Link>

这会将我重定向到一个包含 ItemDetails 组件的新页面，该组件仅更详细地显示该项目的所有信息并使用整个页面而不是仅用于 Item.

如上所述，问题是我想要一个在 Item 和 ItemDetails 之间保持同步的倒数计时器（可以从它们中的任何一个启动、停止等）它的状态将反映在其他组件中）。最初，我想到了使用 MobX 并创建一个商店并将其用作在两个组件之间保持相同状态的方法。但是，问题在于我有多个 Item 组件实例，每个实例都指向自己的 ItemDetails 并且通过使用单个存储，该存储只会在所有组件之间共享第一个启动计时器的状态Items（这里可能是错误的，因为 MobX 是我昨天才开始阅读的东西 ^^）。

我的问题是，解决此问题的最佳方法是什么？这是否可以使用 Mobx plus 商店或应用程序的结构问题（例如：找到一种方法使 Item 和 ItemDetails 成为同一层次结构的一部分？

如有任何帮助，我们将不胜感激。

Answer 1

这是一个使用 React "context" 在组件和 refs 之间共享数据以在重新渲染之间保持时间的工作示例：

https://codesandbox.io/s/silly-http-h25dr?fontsize=14&hidenavigation=1&theme=dark

使计时器在组件之间保持同步

Keeping timer in sync across components

javascript

reactjs

next.js