如何使用 Reactjs 在相同類型的兩個組件之間共享道具（雙向）？

Question

我正在使用 React 構建一個音樂應用程序，我是一個新手:)

我的目標是

• 加載 JSON 播放列表（格式為JSPF ）
• 顯示基於此 JSON 的播放列表
• 用播放列表曲目填充播放器的隊列。

所以我正在處理幾個組件：Track、Tracklist、Playlist 和 Player。

• 曲目列表有曲目。
• Playlist 和 Player 有一個 Tracklist（和其他東西）：Player 的隊列是一個 Tracklist 組件。
• Player 不是 Playlist 的后代，它在旁邊。 例如，我希望能夠將播放列表的某些曲目加入播放器中（或取消加入隊列）。

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

假設我有一個最喜歡的曲目道具。
我會通過單擊嵌套在 Track 組件中的按鈕來切換它。 如果我單擊播放列表中或播放器中的按鈕，我需要更新兩個曲目的道具； 反之亦然：所有道具都應該“同步”。

我可以用 React 做到這一點嗎？如何做？

非常感謝您的建議！

Answer 1

您應該有一個容器組件和其他組件（Track、Tracklist、Playlist 和 Player）作為容器組件的子組件，容器組件可以將 props 傳遞給子組件並將函數的引用作為 props，因此可以擁有所有邏輯。

你可以查看這個例子： https://github.com/upretim/thinking-in-react/

在這個例子中，除了 App 組件之外的所有組件都是啞/功能組件，App 是智能/有狀態或容器組件，它具有所有的邏輯和數據。 在示例中，過濾器的值使用父組件在子組件之間共享。