React获取另一个组件状态

110

维伦德拉游行

您好，我刚开始对在主组件中获取另一个组件的状态不太熟悉。任何人都可以帮忙。

方案我有4个分量，即A，B，C，D

在此，组件B充当C和D的父代，而组件A充当B的父代
现在，我想读的状态B，C，d在A组份，并将它们存储在状态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

Theabrar

您可以在组件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;