reactjs - React 获取另一个组件状态

Question

你好我刚开始反应不太熟悉在主组件中获取另一个组件的状态。任何人都可以请在这里帮忙。

场景我有 4 个组件，即 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

标签： reactjsreact-componentreact-state

Answer 1

您可以在组件 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 函数作为道具传递给Components C & D。