状態を特定の条件に設定するtrueかfalse、特定の条件に基づいて設定する必要があります。親コンポーネントで状態を定義し、その状態を子コンポーネントに設定するtrueかfalse、子コンポーネントからメソッドを呼び出します。
以下はコードです、
class ParentComponent extends React.purecomponent {
state = {
first: false,
second: false,
};
set_first_to_true =() => {
this.setState({first: true});
}
set_first_to_false =() => {
this.setState({first: false});
}
set_second_to_true =() => {
this.setState({second: true});
}
set_second_to_false =() => {
this.setState({second: false});
}
render() {
return (
<ChildComponent
set_first_to_true={this.set_first_to_true}
set_first_to_false={this.set_first_to_false}
set_second_to_true={this.set_second_to_true}
set_second_to_false={this.set_second_to_false}/>)
}
}
class ChildComponent extends react.purecomponent {
componentDidUpdate () {
this.props.set_first_to_true();
this.props.set_first_to_false();
this.props.set_second_to_true();
this.props.set_second_to_false();
}
}
上記のコードからわかるように、コードの重複があります。繰り返しがないようにこれをリファクタリングするにはどうすればよいですか？ありがとう。
次のように、1つの状態更新ハンドラーを再利用できます。
// Parent
...
handleUpdate = (name, value) => {
this.setState({ [name]: value });
};
...
render() {
return (
<Child onUpdate={this.handleUpdate} />
);
}
// Child
...
this.props.onUpdate('first', true);
this.props.onUpdate('first', false);
this.props.onUpdate('second', true);
...
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加