Реакция: связь между вложенными компонентами

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!

Я перепробовал все, и это, кажется, не работает, я действительно запутался, как go об этом!