Ich habe zwei Komponenten: Übergeordnete Komponente, von der aus ich den Status der untergeordneten Komponente ändern möchte:
class ParentComponent extends Component {
toggleChildMenu() {
?????????
}
render() {
return (
<div>
<button onClick={toggleChildMenu.bind(this)}>
Toggle Menu from Parent
</button>
<ChildComponent />
</div>
);
}
}
Und untergeordnete Komponente :
class ChildComponent extends Component {
constructor(props) {
super(props);
this.state = {
open: false;
}
}
toggleMenu() {
this.setState({
open: !this.state.open
});
}
render() {
return (
<Drawer open={this.state.open}/>
);
}
}
Ich muß entweder Änderung des Kindes Komponente offen Zustand von übergeordneter Komponente, oder rufen Sie untergeordnete Komponente des toggleMenu () von übergeordneter Komponente als Schaltfläche in Parent Component geklickt wird?
javascript
reactjs
Torayeff
quelle
quelle
Antworten:
Der Status sollte in der übergeordneten Komponente verwaltet werden. Sie können den
open
Wert auf die untergeordnete Komponente übertragen, indem Sie eine Eigenschaft hinzufügen.quelle
classNames({ foo: true, bar: this.props.open });
// => 'foo' wenn this.props.open = false und 'foo bar' wenn this.props.open = true.toggle
der ChildComponent eine Eigenschaft hinzufügen<ChildComponent open={this.state.open} toggle={this.toggleChildMenu.bind(this)} />
undthis.props.toggle()
dieChildComponent
<ChildComponent toggle={this.toggleChildMenu.bind(this)} />
Die übergeordnete Komponente kann den untergeordneten Status verwalten, indem eine Requisite an das untergeordnete Element übergeben wird, und das untergeordnete Element konvertiert diese Requisite mithilfe von componentWillReceiveProps in den Status.
quelle
getDerivedStateFromProps()
. Miguels Antwortvorschlag zur VerwendungcomponentWillReceiveProps(props)
ist jedoch verfügbar und hat in meinem Umfeld wie ein Zauber gewirkt.Die obige Antwort ist für mich teilweise richtig, aber in meinem Szenario möchte ich den Wert auf einen Status setzen, da ich den Wert zum Anzeigen / Umschalten eines Modals verwendet habe. Also habe ich wie unten verwendet. Hoffe es wird jemandem helfen.
Referenz - https://github.com/kriasoft/react-starter-kit/issues/909#issuecomment-252969542
quelle
Sie können eine Requisite vom übergeordneten Element senden und in der untergeordneten Komponente verwenden, sodass Sie die Statusänderungen des untergeordneten Elements auf den gesendeten Requisitenänderungen basieren. Sie können dies mithilfe von getDerivedStateFromProps in der untergeordneten Komponente verarbeiten.
quelle
Mit createRef können Sie den Status der untergeordneten Komponente von der übergeordneten Komponente ändern. Hier sind alle Schritte.
Erstellen Sie eine Methode, um den Status in der untergeordneten Komponente zu ändern.
2 - Erstellen Sie mit React.createRef () eine Referenz für die untergeordnete Komponente in der übergeordneten Komponente.
3 - Fügen Sie der Referenz eine Referenz mit der untergeordneten Komponente hinzu, indem Sie ref = {} verwenden.
4 - Rufen Sie die untergeordnete Komponentenmethode mit this.yor-reference.current.method auf.
Übergeordnete Komponente
Untergeordnete Komponente
quelle