Ich versuche im Wesentlichen, Tabs in Reaktion zu bringen, aber mit einigen Problemen.
Hier ist eine Datei page.jsx
<RadioGroup>
<Button title="A" />
<Button title="B" />
</RadioGroup>
Wenn Sie auf die Schaltfläche A klicken, muss die RadioGroup-Komponente die Schaltfläche B deaktivieren .
"Ausgewählt" bedeutet nur einen Klassennamen aus einem Status oder einer Eigenschaft
Hier ist RadioGroup.jsx
:
module.exports = React.createClass({
onChange: function( e ) {
// How to modify children properties here???
},
render: function() {
return (<div onChange={this.onChange}>
{this.props.children}
</div>);
}
});
Die Quelle von Button.jsx
spielt keine Rolle, es gibt ein reguläres HTML-Optionsfeld, das das native DOM- onChange
Ereignis auslöst
Der erwartete Durchfluss ist:
- Klicken Sie auf die Schaltfläche "A"
- Die Schaltfläche "A" löst das native DOM-Ereignis onChange aus, das an RadioGroup weitergeleitet wird
- RadioGroup onChange Listener wird aufgerufen
- RadioGroup muss die Schaltfläche B abwählen . Das ist meine Frage.
Hier ist das Hauptproblem , ich bin die Begegnung: Ich kann nicht mehr bewegen <Button>
s inRadioGroup
, weil die Struktur dieses so ist , dass die Kinder sind willkürlich . Das heißt, das Markup könnte sein
<RadioGroup>
<Button title="A" />
<Button title="B" />
</RadioGroup>
oder
<RadioGroup>
<OtherThing title="A" />
<OtherThing title="B" />
</RadioGroup>
Ich habe ein paar Dinge ausprobiert.
Versuch: In RadioGroup
's onChange-Handler:
React.Children.forEach( this.props.children, function( child ) {
// Set the selected state of each child to be if the underlying <input>
// value matches the child's value
child.setState({ selected: child.props.value === e.target.value });
});
Problem:
Invalid access to component property "setState" on exports at the top
level. See react-warning-descriptors . Use a static method
instead: <exports />.type.setState(...)
Versuch: In RadioGroup
's onChange-Handler:
React.Children.forEach( this.props.children, function( child ) {
child.props.selected = child.props.value === e.target.value;
});
Problem: Es passiert nichts, auch wenn ich der Button
Klasse eine componentWillReceiveProps
Methode gebe
Versuch: Ich habe versucht, einen bestimmten Status des Elternteils an die Kinder zu übergeben, sodass ich einfach den übergeordneten Status aktualisieren und die Kinder automatisch antworten lassen kann. In der Renderfunktion von RadioGroup:
React.Children.forEach( this.props.children, function( item ) {
this.transferPropsTo( item );
}, this);
Problem:
Failed to make request: Error: Invariant Violation: exports: You can't call
transferPropsTo() on a component that you don't own, exports. This usually
means you are calling transferPropsTo() on a component passed in as props
or children.
Schlechte Lösung Nr. 1 : Verwenden Sie die cloneWithProps- Methode von react-addons.js , um die untergeordneten Elemente beim Rendern in zu klonenRadioGroup
ihnen Eigenschaften zu übergeben
Schlechte Lösung Nr. 2 : Implementieren Sie eine Abstraktion um HTML / JSX, damit ich die Eigenschaften dynamisch übergeben kann (töte mich):
<RadioGroup items=[
{ type: Button, title: 'A' },
{ type: Button, title: 'B' }
]; />
Und dann rein RadioGroup
bauen Sie diese Schaltflächen dynamisch auf.
Diese Frage hilft mir nicht, weil ich meine Kinder rendern muss, ohne zu wissen, was sie sind
RadioGroup
möglicherweise wissen, dass er auf ein Ereignis seiner willkürlichen Kinder reagieren muss? Es muss unbedingt etwas über seine Kinder wissen.React.addons.cloneWithProps
und übergeben Sie die neuen Requisiten , die Sie haben möchten .props
sind unveränderlich, also erstellen Sie einen neuen Hash, führen ihn mit den aktuellen Requisiten zusammen und übergeben den neuen Hashprops
an eine neue Instanz der untergeordneten Komponente.Antworten:
Ich bin mir nicht sicher, warum Sie sagen, dass die Verwendung
cloneWithProps
eine schlechte Lösung ist, aber hier ist ein funktionierendes Beispiel für die Verwendung.Hier ist eine jsFiddle die es in Aktion zeigt.
BEARBEITEN : Hier ist ein vollständigeres Beispiel mit dynamischem Tab-Inhalt: jsFiddle
quelle
this
. Gibt es einen wirklichen Vorteil, außer React verwendet zu haben?Die Tasten sollten zustandslos sein. Anstatt die Eigenschaften einer Schaltfläche explizit zu aktualisieren, aktualisieren Sie einfach den eigenen Status der Gruppe und rendern Sie erneut. Die Rendermethode der Gruppe sollte dann beim Rendern der Schaltflächen ihren Status überprüfen und "aktiv" (oder etwas anderes) nur an die aktive Schaltfläche übergeben.
quelle
Vielleicht ist meine eine seltsame Lösung, aber warum nicht Beobachtermuster verwenden?
Vielleicht benötigen Sie etwas anderes, aber ich fand das sehr mächtig,
Ich bevorzuge es wirklich, ein äußeres Modell zu verwenden, das Beobachterregistermethoden für verschiedene Aufgaben bereitstellt
quelle
Button.jsx
?onChange()
undonChange(e)
Erstellen Sie ein Objekt, das als Vermittler zwischen Eltern und Kind fungiert. Dieses Objekt enthält Funktionsreferenzen sowohl im übergeordneten als auch im untergeordneten Objekt. Das Objekt wird dann als Requisite vom Elternteil an das Kind übergeben. Codebeispiel hier:
https://stackoverflow.com/a/61674406/753632
quelle