背景知识:我正在尝试学习 React 并正在使用 next 构建一个小型应用程序(使用我不久前完成的教程中的模板)。我最近遇到了一个问题，我需要在两个不在同一层次结构中的组件之间保持计时器同步。
我有一个 Item 组件，它以更简洁的方式显示有关该项目的一些详细信息(描述、标题等)(一个图 block 仅显示整个项目信息的一部分)。如果我单击 Item 磁贴，我会看到一个 next.js 链接组件，如下所示:
<Link href={{pathname: "/item", query: { id: item.id }}}>
<a>{item.title}</a>
</Link>
这会将我重定向到一个包含 ItemDetails 组件的新页面，该组件仅更详细地显示该项目的所有信息，并使用整个页面而不是仅用于 的图 block 项目。
如上所述，问题是我想要一个在 Item 和 ItemDetails 之间保持同步的倒计时器(可以从它们中的任何一个及其状态都会反射(reflect)在另一个组件中)。最初，我想到使用 MobX 并创建一个存储，并使用它来保持两个组件之间相同的状态。然而，问题是我有 Item 组件的多个实例，每个实例都指向自己的 ItemDetails 并使用一个仅共享状态的存储所有 Item 之间第一个启动的计时器(这里可能是错误的，因为 MobX 是我昨天才开始阅读的内容 ^^)。
我的问题是，解决这个问题的最佳方法是什么？使用 Mobx plus 商店是否可行，还是应用程序的结构问题(例如:找到一种方法使 Item 和 ItemDetails 成为同一层次结构的一部分？
如有任何帮助，我们将不胜感激。
最佳答案
这是一个使用 React“上下文”在组件和引用之间共享数据以保持重新渲染时间的工作示例:
https://codesandbox.io/s/silly-http-h25dr?fontsize=14&hidenavigation=1&theme=dark
关于javascript - 保持计时器在组件之间同步，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59983523/