如何使用Reactjs在相同类型的两个组件之间共享道具（两种方式）？

我正在使用React构建一个音乐应用程序，我是一个新手：）

我的目标是

• 加载JSON播放列表（格式为）
• 基于此JSON显示播放列表
• 用播放列表曲目填充播放器的队列

所以我正在研究几个组件：曲目、曲目列表、播放列表和播放器

• 轨迹列表有轨迹
• Playlist和Player有一个Tracklist（和其他东西）：Player的队列是Tracklist组件
• 播放器不是播放列表的后代，而是旁白。例如，我希望能够将播放列表中的一些曲目排队（或取消排队）到播放器中

我想要的是能够在播放列表和播放器之间共享/同步（相同）曲目的道具：

比如说，我有一个最喜欢的道具作为一条赛道。
我会通过单击嵌套在轨迹组件中的按钮来切换它。 我需要更新两首曲目的道具，如果我点击播放列表中的按钮，或者在播放器中；维卡副主席：所有道具都应该“同步”

我可以用React做这件事吗？怎么做

---

非常感谢你的建议

您应该有一个容器组件和其他组件（曲目、曲目列表、播放列表和播放器）作为容器组件的子组件，容器组件可以将道具传递给子组件，并将函数引用作为道具，因此可以拥有所有逻辑

您可以检查此exmaple：

---

在本例中，除App组件外的所有组件都是哑/功能组件，App是智能/有状态或容器组件，具有所有逻辑和数据。在示例中，filter的值在使用父组件的子组件之间共享。

将其提升：我计划将其嵌入Wordpress网站：将有播放器和内容的iframe（&因此播放列表），这样我就可以在不中断播放器的情况下导航。所以它不能像你说的那样工作，是吗？