我有两个组件: Parent Component 我想从中更改子组件的状态:
class ParentComponent extends Component {
toggleChildMenu() {
?????????
}
render() {
return (
<div>
<button onClick={toggleChildMenu.bind(this)}>
Toggle Menu from Parent
</button>
<ChildComponent />
</div>
);
}
}
和 Child Component :
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}/>
);
}
}
我需要从Parent Component更改Child Component的 open 状态,或者在单击Parent Component中的Button时从Parent Component调用Child Component的 toggleMenu() ?
3 回答
应该在父组件中管理状态 . 您可以通过添加属性将
open
值传输到子组件 .父组件可以管理将prop传递给子级的子状态,子级使用componentWillReceiveProps将状态转换为状态 .
上面的答案对我来说部分正确,但在我的场景中,我想将值设置为一个状态,因为我已经使用该值来显示/切换模态 . 所以我用过如下 . 希望它会帮助某人 .
参考 - https://github.com/kriasoft/react-starter-kit/issues/909#issuecomment-252969542