0
Ich versuche, eine übergeordnete Komponente zum Abrufen einiger Informationen aus der untergeordneten Komponente abzurufen. Insbesondere, damit die übergeordnete Komponente den aktuellen Status des untergeordneten Elements abruft. Wenn ich die unten angegebene Methode versuche und versuche, das aktualisierte Elternelement zu rendern, wird die Aktualisierung langsamer. Hier im Snippet gibt es mir einfach einen einfachen Skriptfehler zurück. Gibt es einen besseren Weg als den derzeitigen Ansatz, den Child-Status von componentWillUpdate abzurufen? Vielen Dank!Abrufen des aktualisierten untergeordneten Status in den übergeordneten Status
class Parent extends React.Component {
constructor(props) {
super();
this.state = {
parentState: "default",
}
this.getChildState = this.getChildState.bind(this);
}
getChildState(childState) {
this.setState({
parentState: childState
})
}
render() {
return (
<div>
<h2>current parentState: {this.state.parentState}</h2>
<Child getChildState={this.getChildState} />
</div>
);
}
}
class Child extends React.Component {
constructor() {
super();
this.state = {
onClick: 0,
}
this.handleClick = this.handleClick.bind(this);
}
handleClick() {
this.setState({
onClick: this.state.onClick + 1
})
}
componentWillUpdate(nextProps, nextState) {
nextProps.getChildState(nextState.onClick);
}
render() {
return (
<div>
<h2>current childState: {this.state.onClick}</h2>
<button onClick={this.handleClick}>Click Me</button>
</div>
);
}
}
ReactDOM.render(<Parent />, app);<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="app"></div>