Javascript 有可能从另一个孩子身上触发一个孩子的功能吗？

我有3个部分：

母公司

孩子1

Child2-不是真正的react组件（它是一个使用第三个javascript库的组件，直接操作DOM，不由react管理）。 此组件从不仅在componentDidMount和componentWillReceiveProps上渲染和变异）

我希望在Child2上从Child1触发函数（让我们称她为“triggerCallback”）。 triggerCallback的实现必须在Child2上，因为它变异了Child2的变量（我不希望由父级状态管理的变量！）

import React，{Component}来自“React”；
const Child1=道具=>{
返回点击我；
};
类Child2扩展组件{
数据=[]；
shouldComponentUpdate（）{
返回false；
}
组件将接收道具（接收道具）{
//在这里，我需要添加一个道具或回调通知来触发“triggerCallback”，如何？
}
triggerCallback=操作=>{
log（“我从Child1触发”）；
//这里是变异数据！
};
//componentDidMount（）{}和一些额外的方法。。。。。
render（）{
返回null；
}
}
const Parent=props=>{
//我如何传递在Child2上实现的函数以从Child1调用？
返回(
);
};

提前谢谢

你应该调查一下。请注意，我不能尝试我的例子，所以认为它是一种伪代码

import React, { Component } from "react";

const Child1 = props => {
  return <button onClick={props.triggerCallback}>Click Me</button>;
};

class Child2 extends Component {
  data = [];

  shouldComponentUpdate() {
    return false;
  }

  constructor(props) {
      // Feed the function in the setter revieved as props
      super(props);
      props.getCallBack(this.triggerCallback);
  }

  triggerCallback = action => {
    console.log("i triggerd from Child1!");
    // here mutate data!
  };

  // componentDidMount() {} and some extra methods.....

  render() {
    return null;
  }
}
const Parent = props => {
  // Use a state that contains child2's function or an empty callback
  const [func, setFunc] = React.useState(() => void(0));
  // send setter as props to child2
  return (
    <div>
      <Child1 triggerCallback={func} />
      <Child2 getCallBack={(cb) => {setFunc(cb);}} />
    </div>
  );

import React，{Component}来自“React”；
const Child1=道具=>{
返回点击我；
};
类Child2扩展组件{
数据=[]；
shouldComponentUpdate（）{
返回false；
}
建造师（道具）{
//在作为道具修改的setter中输入函数
超级（道具）；
props.getCallBack（this.triggerCallback）；
}
triggerCallback=操作=>{
log（“我从Child1触发”）；
//这里是变异数据！
};
//componentDidMount（）{}和一些额外的方法。。。。。
render（）{
返回null；
}
}
const Parent=props=>{
//使用包含child2函数或空回调的状态
const[func，setFunc]=React.useState（（）=>void（0））；
//将二传作为道具发送给child2
返回(
{setFunc（cb）；}}/>
);

因此，从父级向子级传递回调。单击子级时，父级设置一个状态，该状态值将传递给另一个子级。在另一个孩子身上，当得到更新的道具值时，你可以触发一个方法调用。哇，这是一个好主意！但显然，这不可能从一个组件更改另一个组件的功能：“警告：无法从另一个组件的函数体内部更新组件。”我认为以这种方式实现我想要的是不可能的，并且需要以另一种方式来实现approach@EliavLouski也许我认为问题在于在渲染期间调用useState，您可以尝试执行let func=（）=>void（0）；然后在getCallBack={（cb）=>{func=cb；}}}中，您也可以使用

import React, { Component } from "react";

const Child1 = props => {
  return <button onClick={props.triggerCallback}>Click Me</button>;
};

class Child2 extends Component {
  data = [];

  shouldComponentUpdate() {
    return false;
  }

  constructor(props) {
      // Feed the function in the setter revieved as props
      super(props);
      props.getCallBack(this.triggerCallback);
  }

  triggerCallback = action => {
    console.log("i triggerd from Child1!");
    // here mutate data!
  };

  // componentDidMount() {} and some extra methods.....

  render() {
    return null;
  }
}
const Parent = props => {
  // Use a state that contains child2's function or an empty callback
  const [func, setFunc] = React.useState(() => void(0));
  // send setter as props to child2
  return (
    <div>
      <Child1 triggerCallback={func} />
      <Child2 getCallBack={(cb) => {setFunc(cb);}} />
    </div>
  );