React Design Pattern mit mehreren Komponenten

Question

Ich versuche jetzt für einige Tage zu reagieren, aber ich habe Probleme, das Design meiner Anwendung klar zu machen.

Was ich will, ist ein "komplexes" Formular zu erstellen, das mit einer API kommuniziert. Hinter der API befindet sich eine klassische SQL-DB. Also sag ich habe einen Videoplayer der eine m2m zu einer Playlist-Tabelle hat.

In React habe ich jetzt eine Komponente mit allen Feldern des Players. Das Listenfeld in der Spielertabelle zeigt die mögliche Auswahl von Wiedergabelisten (ich erhalte diese Daten über die API). So weit, ist es gut.

Jetzt wollte ich eine neue Komponente mit einem from für die Playlist erstellen, wenn jemand beim Erstellen eines Players auch eine neue Playlist erstellen möchte (es gibt eine Schaltfläche zum Hinzufügen einer neuen Playlist).

Nun meine Fragen:

1. Da die Playlist Form einen POST-API-Aufruf tun muss, und soll die neu erstellen ID für die Spieler Form Komponente ... Sollte die Playlist-Komponente hat ihren eigenen Zustand zurückkehren?

2. Wird empfohlen, dass die beiden Komponenten ihren eigenen Zustand haben? (Es gibt einige weitere m2m Felder in der Spielerform und mit nur einem Zustand wird der Staat schnell schwer strukturiert zu bleiben.)

3. Es wird empfohlen, das Player-Formular abzuschalten Komponente, wenn die Aufnahme der neuen Playlist oder dem Spieler Form nur unsichtbar machen?

Answer 1

ich einen Blick auf this

folgt nehmen würde Was meiner Meinung nach. Es gibt viele verschiedene Ansätze, um diese Art von Dingen sind , aber das hat am besten für mich funktioniert.

Geben Sie Ihrer untergeordneten Komponente keinen eigenen Status, sondern machen Sie alle Ihre Ansichtskomponenten statuslos und verpacken Sie sie in eine große Containerkomponente. Dann

1) Sie Playlist-Formular kann die Post-API-Funktion als Rückruf erhalten. In Ihrem Stateful-Container definieren es als so etwas wie

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

Dann können Sie diese Daten übergeben, wo immer es nötig ist, weil alle Ihre Komponenten sind Kinder der Komponente enthält, dass die Daten in dem Zustand, so dass sie alle wahlberechtigten sind, sie zu empfangen als Requisiten. Sie können dieses Muster mit jeder Ihrer Komponenten wiederholen, daher ist es sehr hilfreich, wenn Sie Daten zwischen Komponenten austauschen müssen, insbesondere die Ergebnisse eines API-Aufrufs. Vergessen Sie auch nicht, alle Funktionen zu binden, die den Status setzen!

2) Ich bin ein wenig unklar, was Sie hier meinen. Sind diese Komponenten Geschwister oder Nachkommen? Wenn sie identische Geschwister sind (d. H. Mehrere Instanzen derselben Sache), dann verschieben Sie sie gegebenenfalls in eine separate Datei und definieren sie als ihre eigenen zustandsbehafteten Reaktionskomponenten. Im Allgemeinen finde ich, dass dies mit dem oben beschriebenen Muster selten notwendig ist und dass Ihr Zustand an einer Stelle verwaltet werden kann. Wenn Sie hierüber etwas klarstellen oder einen Code schreiben, kann ich vielleicht mehr helfen.

3) Ich würde es unmounten und ich würde es mit einigen raffinierten Inline-Logik tun. Haben Sie eine Variable im Zustand vielleicht displayComponent: true. Wenn Sie möchten, dass die Komponente ausgeblendet wird, setzen Sie diese auf "false" und setzen Sie sie auf "true", wenn Sie sie sehen möchten.Dann in Ihrer Render Aussage, es ist so einfach wie:

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

Jetzt jedes Mal reagieren den dom macht, wird Ihre Komponente nur angezeigt, wenn dieser Variable auf true gesetzt ist.

Hoffe das half! Ich ermutige Sie sehr, den Artikel zu lesen, den ich oben verlinkt habe und dieses Entwurfsmuster ein wenig mehr zu erforschen. Es hat mir enorm bei meiner React-Entwicklung geholfen.