Ich mache meinen ersten Schritt in ReactJS und versuche, die Kommunikation zwischen Eltern und Kindern zu verstehen. Ich mache Form, also habe ich die Komponente zum Stylen von Feldern. Außerdem habe ich eine übergeordnete Komponente, die ein Feld enthält und es überprüft. Beispiel:
var LoginField = React.createClass({
render: function() {
return (
<MyField icon="user_icon" placeholder="Nickname" />
);
},
check: function () {
console.log ("aakmslkanslkc");
}
})
var MyField = React.createClass({
render: function() {
...
},
handleChange: function(event) {
//call parent!
}
})
Gibt es eine Möglichkeit, dies zu tun? Und ist meine Logik gut in der Reaktion auf "Welt"? Vielen Dank für Ihre Zeit.
quelle
<Child value={this.state.value} onChange={this.changeHandler.bind(this)} />
React.createClass
welches automatisch alle Komponentenmethoden bindet. Wenn ich React es6-Klassen verwenden würde, müssten Sie es binden (es sei denn, Sie würden automatisch im Konstruktor binden, was heutzutage viele Leute tun, um dies zu umgehen).bind
eine neue Funktion zurückgegeben wird. Im Grunde genommen erstellen Sie also jedes Mal eine neue Funktion, wenn Sie rendern. Dies ist wahrscheinlich in Ordnung, aber wenn Sie im Konstruktor binden, tun Sie dies nur einmal pro Komponentenmethode bei der Instanziierung und nicht bei jedem Rendern. Es ist ein Trottel ... aber technisch besser, denke ich!Sie können beliebige übergeordnete Methoden verwenden. Dazu sollten Sie diese Methoden wie einen einfachen Wert von Ihrem Elternteil an Ihr Kind senden. Und Sie können viele Methoden des übergeordneten Elements gleichzeitig verwenden. Beispielsweise:
Und verwenden Sie es so für das Kind (für alle Aktionen oder für alle untergeordneten Methoden):
quelle
this.props
im Rückruf wirdundefined
.this
)2019 Update mit React 16+ und ES6
Wenn Sie dies veröffentlichen, da
React.createClass
es in React Version 16 veraltet ist und das neue Javascript ES6 Ihnen weitere Vorteile bietet.Elternteil
Kind
Vereinfachtes staatenloses Kind als ES6-Konstante
quelle
Übergeben Sie die Methode von der
Parent
Komponente alsprop
an IhreChild
Komponente. dh:quelle
Verwenden der Funktion || zustandslose Komponente
Übergeordnete Komponente
Untergeordnete Komponente
quelle
Reagiere 16+
Untergeordnete Komponente
Übergeordnete Komponente
quelle