React設計模式與多個組件

Question

我試圖進入一些日子的反應，但我有問題，以清楚我的應用程序的設計。

我想要創建一個與API通信的「複雜」表單。在API後面有一個經典的SQL DB。 所以說我有一個播放列表表有一個m2m的Videoplayer。

在React中，我現在有一個包含播放器所有字段的組件。播放器表中的列表字段顯示播放列表的可能選擇（我通過API獲取該數據）。到現在爲止還挺好。

現在我想從播放列表的東西創建一個新的組件，如果有人想創建一個播放器（有一個按鈕，點擊添加新的播放列表）時，還創建一個新的播放列表。

現在我的問題：

1. 因爲播放列表的形式需要做一個POST API調用，並應新創建的ID返回到播放器表單組件......如果播放列表組件都有其自己的狀態？

2. 建議兩個組件都有自己的狀態嗎？ （在玩家形式中還有更多的m2m字段，並且只有一種狀態，狀態很快就難以保持結構化（也因爲反應阻止它具有嵌套的狀態結構）

3. 是否建議您卸載玩家表單添加組件時，新的播放列表，或使播放器的形式只是看不見？

Answer 1

我想接下來我的觀點看看this

。有很多不同的方法對這些類型的東西，但這是最適合我的。

而不是給你的孩子組件它自己的狀態，使所有視圖組件無狀態，並將它們包裝在一個大的容器組件。然後

1）您的播放列表表單可以接收郵政API函數作爲回調。在有狀態的容器，把它定義爲像

apiPost(){ 
    apiFunctionCall() 
    .then(result){ 
     this.setState({ data: result })  
    } 
} 

然後你需要的地方，你可以通過這些數據，因爲所有組件都包含在狀態數據，因此它們都符合資格接受它的組件的子作爲道具。您可以使用任何組件重複此模式，因此如果您需要在組件之間共享數據，尤其是API調用的結果，它非常有用。另外不要忘記綁定任何設置狀態的函數！

2）我有點不清楚你在這裏的含義。這些組件是兄弟姐妹還是後代？如果它們是相同的兄弟姐妹（即同一事物的多個實例），那麼如果需要，將它們移動到單獨的文件並將它們定義爲它們自己的狀態反應組件。我通常發現，使用上述模式很少需要，而且您的狀態可以在一個地方進行管理。如果你澄清或發佈一些代碼，我可能會幫助更多。

3）我會卸載它，我會做一些漂亮的內聯邏輯。有一個變量的狀態可能是displayComponent: true。當你想要隱藏組件時，將其設置爲false，並在需要時將其設置爲true。然後在你的渲染聲明，因爲它是那麼容易：

{this.state.displayComponent && 
<Component />} 

現在每次陣營呈現DOM，如果該變量設置爲true，您的組件將只顯示。

希望這有助於！我強烈建議您閱讀我上面鏈接的文章，並多探索一下這種設計模式。它對我的React開發非常有幫助。