React 获取另一个组件状态

Question

你好，我刚开始使用 React，不太熟悉在主组件中获取另一个组件的状态。谁能帮帮我。

场景我有 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

Answer 1

您需要通过组件提升组件状态

有关详细信息，请参阅 https://reactjs.org/docs/lifting-state-up.html！

Answer 2

您可以在组件 A 中创建状态并将它们作为 props 传递给组件 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。

React 获取另一个组件状态

React Get Another Component State

reactjs

react-component

react-state