Best Practice: Komponenten wiederverwenden oder Duplikate schreiben

Question

Ich arbeite an einer Shop-Administration mit react, alt und immutable. Mein Angebot Objekt sieht mehr oder weniger wie folgt aus:

offer: { 
    groups: [{ 
    articles: [{ 
     optionGroups: [{ 
      options: [] 
     }] 
    }] 
    }] 
} 

ich jeden Eintrag iterieren und ein Formular an, die Gruppe, Artikel zu bearbeiten, .... Wenn etwas geändert wird, rufe ich eine OfferAction auf und übergebe den Pfad, das geänderte Feld und den neuen Wert an die Entität, z. OfferActions.update([2, 'articles', 5, 'optionGroups'], 'name', 'MyOptionGroup')

Jetzt möchte ich das exakt gleiche Formular anzeigen, aber mit verschiedenen Platzhaltern und ChangeHandlers. Wenn ein Formular ausgefüllt ist, sollte die Entität erstellt werden (eine andere OfferAction muss aufgerufen werden). Was ist die beste Vorgehensweise, um dies zu tun?

Ich dachte an den folgenden Möglichkeiten:

Push-leer-Elemente auf OfferStor Zustand
Die leeren Elemente wie die andere angezeigt werden. Ich muss keine Komponenten duplizieren, aber ich muss mehrere Prüfungen implementieren, die nach einer Änderung OfferAction aufgerufen werden müssen, Platzhalter zum Rendern und Werte, die ausgeblendet werden sollen, wenn sie fehlen. Nachdem die Entität erstellt wurde, würde ich einfach ein weiteres leeres Element auf das Angebotsarray schieben.

zweite Komponente erstellen
ich nur eine zweite Komponente schaffen könnte, die ich machen. Ich würde das Formular über einen internen Status verwalten, die Entität erstellen, wenn das Formular ausgefüllt ist, und den Status zurücksetzen. Dies würde zu einer Beute von doppeltem jsx führen.

Gibt es Best Practices, um dies zu erreichen, ohne Komponenten zu duplizieren oder andere zu verkomplizieren?

Answer 1

Sie wollen nur verschiedene Platzhalter und ChangeHandlers?

Legen Sie eine boolesche Stütze auf der Komponente der obersten Ebene fest, die dupliziert werden muss. Dann für jeden Platzhalter/ChangeHandler;

if(this.props.someBooleanValue){ 
    //alternate action or placeholder 
} else { 
    //original action or placeholder 
} 

Fügen Sie someBooleanValue={true} auf die alternativen Versionen, die Originale lassen, wie sie ist.

Answer 2

Da es nur kleine Unterschiede gibt, empfehle ich Ihnen Ihre erste Möglichkeit, also erstellen Sie für beide Fälle einen Renderer.

Fügen Sie jedem Feld das entsprechende JSON-Objekt (für Gruppen, Artikel e.t.c) hinzu, einschließlich eines Felds für leere Elemente, und setzen Sie es auf "true", z. isNew = wahr. Wenn Sie es so machen, können Sie für alle Elemente den gleichen Änderungshandler verwenden.

Die erforderlichen Informationen für das Update befinden sich im JSON-Objekt. Wenn Sie ein neues Element erstellen müssen, markieren Sie das Flag isNew. Setzen Sie das Flag nach dem Hinzufügen auf false und Sie können es wie eines der vorhandenen behandeln.