Reagieren.Kinder.anzeigen rekursiv?

Ich Baue ein Reagieren Komponente für das Rendern einer HTML-form und ich finde die müssen rekursiv Durchlaufen alle Kinder meiner Eltern-Form-Komponente, um das hinzufügen von zusätzlichen Requisiten, nur Kinder, Komponenten eines bestimmten Typs.

Einem Beispiel (JSX):

<Form>
    <p>Personal Information</p>
    <Input name="first_name" />
    <Input name="last_name" />
    <Input name="email" />
    <Label>
        Enter Your Birthday
        <Input name="birthday" type="date" />
    </Label>
</Form>

In diesem Beispiel verwende ich Reagieren.Kinder.Karte in mein Formular-Komponente, und klicken Sie in die Karte-Funktion, die ich bin überprüfung des Kindes "Typ" und das Kind " - Typ.displayName", um zu bestimmen, welches element ich beschäftige mich mit (entweder ein natives HTML-element oder ein ReactElement):

var newChildren = React.Children.map(this.props.children, function(child) {
    if (is.inArray(child.type.displayName, supportedInputTypes)) {
      var extraChildProps = {
        alertColor: this.props.alertColor,
        displayErrors: this.state.displayErrors
      }
      return React.cloneElement(child, extraChildProps);
    } else {
      return child;
    }
  }.bind(this));

Mein problem ist, dass Sie Reagieren.Kinder.Karte nur flach iteriert über diese.Requisiten.Kinder, und ich möchte es auch prüfen, die Kinder der Kinder der Kinder, etc. Ich muss hinzufügen Requisiten, um nur mein Input-Komponenten, so dass Sie wissen, Wann Sie Fehler anzeigen, und welche Farbe sollte die Fehlermeldung angezeigt werden, etc. Im obigen Beispiel wird der Geburtstag Eingang erhält nicht die notwendigen Requisiten, denn es ist verpackt in einer Label-Komponente.

Jeden plan zur Reagieren.Kinder.Karte, um eine "rekursive" - Modus oder einem anderen Dienstprogramm gibt, die das erreichen können, was ich versuche zu tun?

Am Ende des Tages, möchte ich schreiben, eine einzelne Funktion, die maps durch jedes Kind (auch verschachtelt), um das ausführen einer operation auf (in diesem Fall Klonen).

  • Ich habe einen Weg herausgefunden, um die Arbeit rund um das spezifische problem, das ich versuche zu lösen, so dass ich nicht mehr implementieren müssen, um diese spezifische rekursive iteration feature, aber es wäre echt cool zu hören, dass Möglichkeiten, dieses problem zu lösen, von anderen, die Probleme haben müssen.
  • Dies ist die Art von problem, das Sie lösen, indem Sie vermeiden das problem. Mit Reagieren.Kinder.Karte ist eine rote fahne, dass Sie etwas tun sind kompliziert und verwirrend.
  • Vereinbart. Ich sehe, dass die Verwendung höherwertiger Bauteile und/oder Mixins in Verbindung (vorübergehend) und/oder so etwas wie einer globalen Bewegung-store ist der Weg, um zu verhindern, dass diese Methode verwenden. In meinem konkreten Anwendungsfall war es die Formsy.Mixin, die kam zu meiner Rettung, da war ich in der Lage zu bestimmen, Wann "displayErrors" ganz einfach, indem Sie die Formsy mixin-Funktion isFormSubmitted (), die mein problem gelöst, ohne Klon-Kinder mit zusätzlichen Requisiten.
  • wenn Sie möchten, schreiben Sie immer eine Reihe von boilerplate-code zu injizieren value, onChange und Validierung Requisiten, um Ihre Formular-Steuerelemente, mit allen Mitteln tun es. Aber eines Tages bekam ich müde zu tun, herausgefunden, wie man injizieren Sie alle mit rekursiven Klonen, verwandelte Sie in eine Bibliothek (github.com/jedwards1211/react-bind-data), die andere Bibliothek, um loszuwerden, alle die redux boilerplate (github.com/jedwards1211/react-bind-data-redux), und beschleunigte meine Entwicklungszeit drastisch. Rekursive Klonen ist wirklich der einzige Weg, dies zu tun, gerade jetzt.
InformationsquelleAutor eriklharper | 2015-10-02
Schreibe einen Kommentar