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

Question

我正在尝试通过父组件按钮单击来调用每个子组件函数。尝试使用props并将按钮单击分配给componentDidMount函数上的新函数，但是结果是只有最后一个函数alert（“ child2 save “）;被分配并在单击按钮时执行，我希望alert（” child1 save“）;也将被执行。

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

 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>);
      }
  }

Answer 1

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中具有eventHandler。并在需要触发子功能时更改状态。

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