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

Question

我正在使用 React 构建一个音乐应用程序，而且我是新手 :)

我的目标是

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

所以我正在研究几个组件：Track、Tracklist、Playlist 和 Player。

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

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

假设我有一个 favorited 用于 Track 的道具。
我会通过单击嵌套在 Track 组件中的按钮来切换它。 如果单击播放列表或播放器中的按钮，我需要更新两个曲目的道具；反之亦然：所有道具都应该“同步”。

我可以用 React 做到这一点吗？如何做？

非常感谢您的建议！

Answer 1

你应该有一个容器组件和其他组件（Track、Tracklist、Playlist和Player）作为容器组件的子组件，容器组件可以将props传递给children，并将函数引用作为props，所以可以拥有所有的逻辑。

您可以查看此示例： https://github.com/upretim/thinking-in-react/

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