如何解决React获取另一个组件状态
您好,我刚开始对在主组件中获取另一个组件的状态不太熟悉。有人可以帮忙吗?
场景 我有四个组成部分 A,B,C,D
- 此处组件 B 充当 C和D 和组件的父级 A 作为 B 的父代
- 现在,我想读取组件A 中 B,C,D 的状态并存储 它们处于 A组 状态
- 我该如何执行
波纹管供参考
组件A
class A extends Component {
constructor() {
super();
this.state = {
Acomp:''
};
}
render() {
return (
<B/>
)
}
}
export default A;
组件B
class B extends Component {
constructor() {
super();
this.state = {
Bcomp:''
};
}
render() {
return (
<C/>
<D/>
)
}
}
export default B;
组件C
class C extends Component {
constructor() {
super();
this.state = {
Ccomp:''
};
}
render() {
return (
<h1>i am Component C</h1>
)
}
}
export default C
组件D
class D extends Component {
constructor() {
super();
this.state = {
Dcomp:''
};
}
render() {
return (
<h1>i am Component D</h1>
)
}
}
export default D
解决方法
您可以在组件A中创建状态,并将其作为道具传递给组件B,C和D。
组件A
class A extends Component {
constructor() {
super();
this.state = {
Acomp:'',Bcomp:'',Ccomp:'',Dcomp:'',};
}
onChange = () =>{
//Write your function to change the value of state here
}
render() {
return (
<B BComp = {this.state.Bcomp} CComp = {this.state.Ccomp} DComp = {this.state.Dcomp} onChange={this.onChange}/>
)
}
}
export default A;
组件B
class B extends Component {
constructor() {
super();
this.state = {
Bcomp:''
};
}
render() {
return (
<C Ccomp={this.props.CComp} onChange={this.onChange}/>
<D Dcomp={this.props.DComp} />
)
}
}
export default B;
如果需要,您还可以将onChange函数传递给 Component C&D 。
,您需要通过组件提升组件状态
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。