Ich baue eine React-Komponente zum Rendern eines HTML-Formulars und ich finde die Notwendigkeit, rekursiv durch alle untergeordneten Elemente meiner übergeordneten Form-Komponente zu iterieren, um zusätzliche Komponenten nur für untergeordnete Komponenten eines bestimmten Typs hinzuzufügen.
Ein Beispiel (in JSX):
%Vor%In diesem Beispiel verwende ich React.Children.map in meiner Form-Komponente, und dann innerhalb der Map-Funktion Ich überprüfe den "Typ" des Kindes und den "type.displayName" des Kindes, um zu bestimmen, welches Element ich ' m (entweder ein natives HTML-Element oder ein ReactElement):
%Vor%Mein Problem ist, dass React.Children.map nur flach durch this.props.children iteriert, und ich möchte, dass es auch Kinder von Kindern von Kindern usw. überprüft. Ich muss Requisiten nur zu meinen Input-Komponenten hinzufügen, so dass Sie wissen, wann Fehler angezeigt werden und welche Farbe die Fehlermeldung anzeigen soll usw. Im obigen Beispiel erhält die Geburtstagseingabe nicht die erforderlichen Requisiten, da sie in eine Label-Komponente eingebettet ist.
Irgendwelche Pläne für React.Children.map, um einen "rekursiven" Modus oder irgendein anderes Dienstprogramm zu haben, das das erreichen kann, was ich versuche?
Am Ende des Tages möchte ich eine einzelne Funktion schreiben, die jedes Kind (sogar geschachtelte) abbildet, um eine Operation darauf auszuführen (in diesem Fall das Klonen).
Obwohl es nicht in React integriert ist, ist dies sicherlich möglich:
%Vor% Wenn Sie versuchen, Requisiten in eine Gruppe von Kindern unter Ihrer Komponente "automatisch" zu schieben, können Sie auch Kontext Dies ermöglicht es Ihnen, Eigenschaften, Funktionen usw. an untergeordnete Komponenten zu "geben", indem Sie sie vom übergeordneten Objekt mit childContextTypes und getChildContext() bereitstellen und das untergeordnete Element mit contextTypes "anfragen".
Ich habe eine kleine Bibliothek erstellt, um mit der Kinderstruktur fertig zu werden. Sie können es hier überprüfen:
In Ihrem Fall können Sie die Methode deepMap verwenden:
%Vor%Eine kurze Antwort darauf ist, dass es ab React 0.14 derzeit nicht möglich ist. Wie FakeRainBrigand erwähnt, ist es mehr als wahrscheinlich ein Code-Geruch, so dass es eine Neubewertung Ihrer Implementierung veranlassen sollte.
Tags und Links reactjs