Ich versuche, den richtigen Weg zu finden, um einige Komponenten zu definieren, die generisch verwendet werden könnten:
<Parent>
<Child value="1">
<Child value="2">
</Parent>
Es gibt eine Logik für die Darstellung zwischen Eltern und Kindern Komponenten natürlich geht, können Sie sich vorstellen , <select>
und <option>
als ein Beispiel dieser Logik.
Dies ist eine Dummy-Implementierung für den Zweck der Frage:
var Parent = React.createClass({
doSomething: function(value) {
},
render: function() {
return (<div>{this.props.children}</div>);
}
});
var Child = React.createClass({
onClick: function() {
this.props.doSomething(this.props.value); // doSomething is undefined
},
render: function() {
return (<div onClick={this.onClick}></div>);
}
});
Die Frage ist, wann immer Sie {this.props.children}
eine Wrapper-Komponente definieren, wie Sie eine Eigenschaft an alle untergeordneten Elemente weitergeben.
javascript
reactjs
react-jsx
Plus-
quelle
quelle
Antworten:
Kinder mit neuen Requisiten klonen
Sie können React.Children verwenden , um die untergeordneten Elemente zu durchlaufen , und dann jedes Element mit neuen Requisiten (flach zusammengeführt) mit React.cloneElement klonen, z.
Geige: https://jsfiddle.net/2q294y43/2/
Kinder als Funktion anrufen
Sie können Requisiten auch an Kinder mit Render-Requisiten übergeben . Bei diesem Ansatz sind die
children
untergeordneten Elemente (die ein beliebiger Requisitenname sein können) eine Funktion, die alle Argumente akzeptieren kann, die Sie übergeben möchten, und die untergeordneten Elemente zurückgibt:Anstelle von
<React.Fragment>
oder einfach können<>
Sie auch ein Array zurückgeben, wenn Sie dies bevorzugen.Geige: https://jsfiddle.net/ferahl/y5pcua68/7/
quelle
value
WeitergabedoSomething
geht verloren.Versuchen Sie für eine etwas sauberere Vorgehensweise:
Bearbeiten: Zur Verwendung mit mehreren einzelnen Kindern (das Kind muss selbst eine Komponente sein) können Sie dies tun. Getestet in 16.8.6
quelle
this.props.children
) ancloneElement
... zu übergeben, die ein ... Element erwartet.React.Children.only
Die Funktion gibt das einzige untergeordnete Element zurück oder löst eine Ausnahme aus, wenn mehrere vorhanden sind (dies wäre nicht vorhanden, wenn es keinen Anwendungsfall gäbe).Versuche dies
Es hat bei mir mit react-15.1 funktioniert.
quelle
React.cloneElement()
direkt zurückzukehren, ohne es in<div>
Tags zu umgeben? Denn was ist, wenn das Kind ein<span>
(oder etwas anderes) ist und wir seinen Tag-Elementtyp beibehalten möchten?React.cloneElement(React.Children.only(this.props.children), {...this.props})
einen Fehler auslösen, wenn mehr als ein Kind übergeben wird. Dann müssen Sie sich nicht in ein Div einwickeln.let {children, ...acyclicalProps} = this.props
und dann, es sei denn, Sie möchten, dass eine der Requisiten des Kindes sich selbst istReact.cloneElement(React.Children.only(children), acyclicalProps)
.Requisiten an direkte Kinder weitergeben.
Alle anderen Antworten anzeigen
Übergeben Sie gemeinsam genutzte globale Daten über den Kontext durch den Komponentenbaum
Haftungsausschluss: Dies ist eine aktualisierte Antwort. Die vorherige Antwort verwendete die alte Kontext-API
Es basiert auf dem Consumer / Provide-Prinzip. Erstellen Sie zunächst Ihren Kontext
Dann benutze via
und
Vollständiges Beispiel, Semi-Pseudo-Code.
1 https://facebook.github.io/react/docs/context.html
quelle
this.context
) - es hat den Kontext nicht auf magische Weise mit Requisiten zusammengeführt. Sie mussten absichtlich den Kontext festlegen und verwenden, was eine ganz andere Sache ist.Requisiten an verschachtelte Kinder weitergeben
Mit dem Update auf React 16.6 können Sie jetzt React.createContext und contextType verwenden .
quelle
this
Kontext zu erhaltenSie können verwenden
React.cloneElement
, es ist besser zu wissen, wie es funktioniert, bevor Sie es in Ihrer Anwendung verwenden. Es wird in eingeführtReact v0.13
, lesen Sie weiter für weitere Informationen, also etwas zusammen mit dieser Arbeit für Sie:Bringen Sie also die Zeilen aus der React-Dokumentation mit, damit Sie verstehen, wie alles funktioniert und wie Sie sie verwenden können:
mehr hier ...
quelle
Der beste Weg, um Eigentum zu übertragen, ist
children
wie eine FunktionBeispiel:
quelle
nested components
. React hat keine verschachtelten Muster, sondern nur Kompositionen. Ja, Kinder müssen eine Funktion sein, es gibt keine Konflikte, da dies ein gültiges JSX-Kind ist. Können Sie ein Beispiel geben mitnesting components
?<Parent>{props => <Nest><ChildComponent /></Nest>}</Parent>
anstatt (nicht zu arbeiten),<Parent><Nest>{props => <ChildComponent />}</Nest></Parent>
also stimme ich zu, dass dies die beste Antwort istTypeError: children is not a function
Ich musste die oben akzeptierte Antwort korrigieren, damit sie mit dieser anstelle dieses Zeigers funktioniert . Für diese Funktion wurde im Rahmen der Kartenfunktion die Funktion doSomething nicht definiert.
Update: Dieser Fix ist für ECMAScript 5, in ES6 ist var that = this nicht erforderlich
quelle
bind()
doSomething
ein Objekt nehmen würden, wiedoSomething: function(obj) { console.log(obj) }
und in dem Kind, das Sie anrufen würdenthis.props.doSomething(obj)
, um sich"obj"
apply
Methode aufruft . Die Verwendungbind()
in der Renderfunktion erstellt bei jedem Aufruf der Rendermethode eine neue Funktion.Sauberer Weg, wenn man ein oder mehrere Kinder berücksichtigt
quelle
this.props
. Im Allgemeinen würde ich nur empfehlen, mit bestimmten Requisiten zu klonen, nicht mit dem ganzen Shebang.{...this.props}
hat bei mir nicht funktioniert, ist der Weg{...child.props}
richtig?React.Children.map(children, child => React.cloneElement(child, props))
Keine der Antworten befasst sich mit dem Problem, Kinder zu haben, die KEINE Reaktionskomponenten sind, wie z. B. Textzeichenfolgen. Eine Problemumgehung könnte ungefähr so aussehen:
quelle
Du brauchst nicht mehr
{this.props.children}
. Jetzt können Sie Ihre untergeordnete Komponente mitrender
in einwickelnRoute
und Ihre Requisiten wie gewohnt weitergeben:quelle
Parent.jsx:
Child.jsx:
und main.jsx:
Siehe Beispiel hier: https://plnkr.co/edit/jJHQECrKRrtKlKYRpIWl?p=preview
quelle
Vielleicht finden Sie diese Funktion auch nützlich, obwohl viele Leute dies als Anti-Pattern angesehen haben. Sie kann dennoch verwendet werden, wenn Sie wissen, was Sie tun, und Ihre Lösung gut entwerfen.
Funktion als untergeordnete Komponenten
quelle
Wenn Sie mehrere Kinder haben, an die Sie Requisiten übergeben möchten , können Sie dies auf folgende Weise mithilfe der React.Children.map tun:
Wenn Ihre Komponente nur ein untergeordnetes Element hat, ist keine Zuordnung erforderlich. Sie können Element einfach sofort klonen:
quelle
Nach der Dokumentation von
cloneElement()
CloneElement ist also das, was Sie verwenden würden, um den Kindern benutzerdefinierte Requisiten bereitzustellen. Die Komponente kann jedoch mehrere untergeordnete Elemente enthalten, die Sie durchlaufen müssen. Andere Antworten schlagen vor, dass Sie sie mit abbilden
React.Children.map
. ImReact.Children.map
Gegensatz zuReact.cloneElement
Änderungen werden jedoch die Schlüssel des Elements angehängt und.$
als Präfix hinzugefügt. Überprüfen Sie diese Frage auf weitere Details: React.cloneElement in React.Children.map bewirkt, dass sich Elementschlüssel ändernWenn Sie es vermeiden möchten, sollten Sie stattdessen die
forEach
Funktion wie wählenquelle
Nach der Antwort von @and_rest klone ich die Kinder auf diese Weise und füge eine Klasse hinzu.
quelle
Ich denke, eine Render-Requisite ist der geeignete Weg, um mit diesem Szenario umzugehen
Sie lassen den Elternteil die erforderlichen Requisiten bereitstellen, die in der untergeordneten Komponente verwendet werden, indem Sie den übergeordneten Code so umgestalten, dass er wie folgt aussieht:
Dann können Sie in der untergeordneten Komponente auf folgende Weise auf die vom übergeordneten Element bereitgestellte Funktion zugreifen:
Jetzt sieht die Verlobungsstruktur folgendermaßen aus:
quelle
Methode 1 - Kinder klonen
Methode 2 - Verwenden Sie einen zusammensetzbaren Kontext
Mit Context können Sie eine Requisite an eine untergeordnete Komponente übergeben, ohne sie explizit als Requisite durch die dazwischen liegenden Komponenten zu übergeben.
Der Kontext hat Nachteile:
Verwenden eines zusammensetzbaren Kontexts
quelle
{children}:{children:ReactNode}
?"children"
hat, vom Typ istReactNode
Der einfachste Weg, dies zu tun:
quelle
Für jeden, der ein einzelnes untergeordnetes Element hat, sollte dies der Fall sein.
quelle
Ist es das, was Sie benötigt haben?
quelle
Aus irgendeinem Grund hat React.children nicht für mich gearbeitet. Das hat bei mir funktioniert.
Ich wollte dem Kind nur eine Klasse hinzufügen. ähnlich wie beim Wechseln einer Requisite
Der Trick hier ist das React.cloneElement . Sie können jede Requisite auf ähnliche Weise übergeben
quelle
Render Requisiten ist der genaueste Ansatz für dieses Problem. Anstatt die untergeordnete Komponente als untergeordnete Requisiten an die übergeordnete Komponente zu übergeben, lassen Sie die untergeordnete Komponente manuell übergeordnete Komponente rendern. Render ist eingebaute Requisiten in reagieren, die Funktionsparameter nehmen. In dieser Funktion können Sie die übergeordnete Komponente mit benutzerdefinierten Parametern beliebig rendern lassen. Grundsätzlich funktioniert es genauso wie Kinderrequisiten, ist jedoch anpassbarer.
Beispiel bei Codepen
quelle
Bei Verwendung von Funktionskomponenten wird häufig der
TypeError: Cannot add property myNewProp, object is not extensible
Fehler angezeigt, wenn Sie versuchen, neue Eigenschaften festzulegenprops.children
. Dies wird umgangen, indem die Requisiten geklont und dann das Kind selbst mit den neuen Requisiten geklont werden.quelle