具有多個組件的 React 設計模式

Question

我現在正在嘗試進行一些反應，但是我在弄清楚我的應用程序的設計方面遇到了問題。

我想要的是創建一個與 API 通信的“復雜”表單。 在 API 后面有一個經典的 SQL DB。 所以說我有一個視頻播放器，它有一個播放列表表的 m2m。

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

現在，如果有人想在創建播放器時也創建一個新的播放列表（有一個按鈕可以單擊以添加新的播放列表），我想為播放列表內容創建一個帶有 from 的新組件。

現在我的問題：

1. 因為播放列表表單需要做一個 POST API 調用，並且應該將新創建的 id 返回給播放器表單組件......播放列表組件應該有自己的狀態嗎？

2. 是否建議兩個組件有自己的狀態？ （玩家表單中有更多的 m2m 字段，只有一種狀態，狀態很快就很難保持結構化（也是因為 React 不鼓勵它具有嵌套的狀態結構。

3. 是否建議在添加新播放列表時卸載播放器表單組件或使播放器表單不可見？

Answer 1

我會看看這個

以下是我的看法。 對這些類型的事情有很多不同的方法，但這是最適合我的方法。

不要給你的子組件它自己的狀態，讓你的所有視圖組件無狀態並將它們包裝在一個大的容器組件中。 然后

1) 您的播放列表表單可以接收 post API 函數作為回調。 在您的有狀態容器中，將其定義為類似

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

然后您可以在任何需要的地方傳遞該數據，因為您的所有組件都是包含該數據的組件的子組件，因此它們都可以作為 props 接收它。 您可以對任何組件重復此模式，因此如果您需要在組件之間共享數據，尤其是 api 調用的結果，這將非常有用。 另外不要忘記綁定任何設置狀態的函數！

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

3）我會卸載它，我會用一些漂亮的內聯邏輯來完成。 狀態變量可能是displayComponent: true 。 當您希望隱藏組件時，將其設置為 false 並在您希望看到它時將其設置為 true。 然后在您的渲染語句中，它很簡單：

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

現在每次 React 渲染 dom 時，您的組件只會在該變量設置為 true 時顯示。

希望這有幫助！ 我強烈建議您閱讀我上面鏈接的文章，並進一步探索這種設計模式。 它在我的 React 開發中極大地幫助了我。