Javascript 单击父按钮调用并执行多个子函数

我尝试从父组件按钮单击调用每个子组件函数。尝试使用道具并将按钮单击分配给componentDidMount函数上的新函数，但结果是只有最后一个函数警报（“child2保存”）；在按钮点击时被分配和执行，我期望警报（“child1保存”）；也将被执行

如何在父组件上单击要调用的每个子函数按钮，注意子组件在父组件内部有相当大的嵌套级别

 class Parent extends Component {

      render() {
        return (
          <div>
            <button onClick={onSaveClick}>Save</button>
            <MainSection setSave={save=> this.onSaveClick= save}>
          </div>
        );
      }
    }


  class MainSection extends Component {
      render() {
        const {setSave} = this.props;
        return (
          <div>
              <Section1 setSave={setSave}>
              <Section2 setSave={setSave}>
          </div>
        );
      }
  }



  class Section1 extends Component {
      render() {
        const {setSave} = this.props;
        return (
          <div>
              <Child1 setSave={setSave}>
          </div>
        );
      }
  }



 class Section2 extends Component {
      render() {
        const {setSave} = this.props;
        return (
          <div>
              <Child2 setSave={setSave}>
          </div>
        );
      }
  }



  class Child1 extends Component {
      onSave() {
           alert("child1 save");
      } 
      componentDidMount() {
          const {setSave} = this.props;
          setSave(this.onSave);
      }
      render() {
        return (<div>Child1</div>);
      }
  }



  class Child2 extends Component {
      onSave() {
          alert("child2 save");
      } 

      componentDidMount() {
          const {setSave} = this.props;
          setSave(this.onSave);
      }

      render() {
        return (<div>Child2</div>);
      }
  }

类父级扩展组件{
render（）{
返回(
拯救
this.onSaveClick=save}>
);
}
}
类MainSection扩展组件{
render（）{
const{setSave}=this.props；
返回(
);
}
}
类Section1扩展了组件{
render（）{
const{setSave}=this.props；
返回(
);
}
}
类Section2扩展了组件{
render（）{
const{setSave}=this.props；
返回(
);
}
}
类Child1扩展了组件{
onSave（）{
警报（“儿童1保存”）；
} 
componentDidMount（）{
const{setSave}=this.props；
设置保存（this.onSave）；
}
render（）{
返回（Child1）；
}
}
类Child2扩展组件{
onSave（）{
警报（“儿童2保存”）；
} 
componentDidMount（）{
const{setSave}=this.props；
设置保存（this.onSave）；
}
render（）{
返回（2）；
}
}

感谢您的回答是的，这是一个很好的解决方案，但在我的实际案例中，我不仅有2个而且有许多子组件20个或更多动态呈现，并且父组件和子组件之间没有直接连接。在达到子组件级别之前，父组件中有6个或更多级别的嵌套组件，在这种情况下，我可以做什么？我应该如何将此引用传递给子组件？您可以使用redux并包装所有组件，分派操作，并将prevProps值与嵌套组件中的当前值进行比较。

class Parent extends Component {
  constructor(props) {
    super(props);
    this.child = React.createRef();
  }

  onClick = () => {
    this.child.current.getAlert();
  };

  render() {
    return (
      <div>
        <Child ref={this.child} />
        <button onClick={this.onClick}>Click</button>
      </div>
    );
  }
}

class Child extends Component {
  getAlert() {
    alert('getAlert from Child');
  }

  render() {
    return <h1>Hello</h1>;
  }
}

ReactDOM.render(<Parent />, document.getElementById('root'));

componentDidUpdate(prevProps) {
if(prevProps.parentVariable !== this.props.parentVariable) {
  console.log("parent called");
}
}