0
子コンポーネントからいくつかの情報を取得するために親コンポーネントを取得しようとしています。具体的には、親コンポーネントに子の現在の状態を取得させる。以下の方法論を試して、更新された親をレンダリングしようとすると、更新が遅くなります。ここではスニペットで単純なスクリプトエラーを返します。 componentWillUpdateで子の状態を取得する私の現在のアプローチよりも良い方法がありますか？ありがとう！子ステートを親ステートに更新する
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>