複数のコンポーネントを持つデザインパターンを反応させよう

Question

私は数日前から反応を見ようとしていますが、私のアプリケーションのデザインをクリアするのに問題があります。

私が望むのは、APIと通信する「複雑な」フォームを作成することです。 APIの背後には古典的なSQL DBがあります。 プレイリストテーブルにm2mを持つビデオプレーヤーがあるとします。

私は今、プレイヤーのすべてのフィールドを持つコンポーネントを持っています。プレイヤーテーブルのリストフィールドには、プレイリストの選択肢が表示されます（このデータはAPIを使用して取得します）。ここまでは順調ですね。

プレイヤーを作成するときに新しいプレイリストも作成したい場合は、新しいプレイリストを作成するために、fromを使用して新しいコンポーネントを作成したかったのです（新しいプレイリストを追加するためにクリックするボタンがあります）。

今私の質問：

1. プレイリストの形式は、POST API呼び出しを行う必要があるとプレーヤーのフォームコンポーネントに新しく作成されたIDを返す必要がありますので...プレイリストのコンポーネントは、自身の状態を持っているべきですか？

2. 2つのコンポーネントが独自の状態を持つことをお勧めしますか？ （プレーヤーのフォームにm2mのフィールドがいくつかあり、状態がただちに構造化されたままになってしまうこともあります）。

3. プレーヤーのフォームをアンマウントすることをお勧めします新しいプレイリストを追加したり、プレーヤーの形がちょうど見えなく？

Answer 1

を、私はどのような次は私の意見ですthis

を見てみましょう。物事のこれらのタイプの異なるアプローチがたくさんありますコンポーネントしかし、これは私のために一番うまくいったものです。

子コンポーネントに独自の状態を与える代わりに、すべてのビューコンポーネントをステートレスにして大きなコンテナコンポーネントにラップします。その後、

1）プレイリストフォームは、ポストAPI関数をコールバックとして受け取ることができます。あなたのステートフルコンテナでは、あなたが必要な場所そして、あなたがそのデータを渡すことができ

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

のようなものとして、それを定義するには、すべてのコンポーネントは、状態のデータは、彼らがそれを受け取るために、すべてのelegibleあるので、含有する成分の子供たちがいるので、小道具として。このパターンはコンポーネントのいずれかで繰り返すことができるので、コンポーネント間でデータを共有する必要がある場合、特にAPI呼び出しの結果に非常に役立ちます。また、状態を設定する関数をバインドすることを忘れないでください！

2）私はあなたがここで何を意味するかについて少し不明です。これらのコンポーネントは兄弟か子孫ですか？それらが同じ兄弟（同じ物の複数のインスタンス）である場合、必要な場合は、それらを別々のファイルに移動し、それらを独自のステートフルな反応コンポーネントとして定義します。私は一般的に、これは上記のパターンではほとんど必要ではなく、あなたの状態を1か所で管理できることがわかります。あなたがこれを明確にしたり、コードを投稿したりすれば、私はもっと助けることができるかもしれません。

3）私はそれをアンマウントし、私はいくつかの気の利いたインラインロジックでそれを行うだろう。状態変数がdisplayComponent: trueである可能性があります。コンポーネントを非表示にしたい場合は、そのコンポーネントをfalseに設定し、それを見たいときにtrueに設定します。次に、あなたのレンダリング文では、同じくらい簡単です：

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

今毎回DOMをレンダリングし、その変数がtrueに設定されている場合、あなたのコンポーネントのみが表示されます反応します。

これが役に立った！上記のリンク先の記事を読んで、このデザインパターンをもう少し調べてみることを強くお勧めします。それは私のReact開発に大いに役立っています。