Question

我很新来做出反应。我一直在嵌套的反应组件之间的通信问题。我查找了一些反应文档，但无济于事。

如何在嵌套的React组件之间进行无休止的沟通？

考虑以下代码

//src com2.js
class Com2 extends React.Component{
  render(){
    return(
      <div>
        {this.props.children}
      </div>
    );
  }
}

//src com1.js
class Com1 extends React.Component{
  constructor(props){
    super(props);
    this.state = {e1: "Before"};
    this.handleClick = this.handleClick.bind(this)
  }

  handleClick(e){
    this.setState({e1: "After"})
  }

  render(){
    return(
      <Com2>
        <Com3>{this.state.e1}</Com3>
        <Com4 clickEvent={this.handleClick}/>
      </Com2>
    );     
  }
}

//src com3.js
class Com3 extends React.Component{
  render(){
    return(
      <div>
        {this.props.children}
      </div>
    );
  }
}

//src com4.js
class Com4 extends React.Component{
  render(){
    return(
      <button onClick={this.props.clickEvent}>click me</button>
    );
  }
}

我的页面设置方式。 com1是发生所有事情的主要类别

这里我要更新状态e1；当用户单击Com4中定义的按钮时！

我已经尝试了所有事情，但似乎没有用，我对如何解决这个问题感到非常困惑！

反应：在嵌套组件之间进行通信

0 个答案: