别 ：）

将函数提升到父级并将数据作为props向下传递。您可以向下传递相同的函数，以防孩子也需要调用它。

https://facebook.github.io/react/docs/lifting-state-up.html

您可以为子组件分配一个 ref，然后像这样调用父组件的函数

class Parent extends React.Component {
   callChildFunction = () => {
       this.child.handleActionParent();  ///calling a child function here
  } 
   render(){
      return (
           <div>
           {/* other things */}
           <Child ref={(cd) => this.child = cd}/>
           </div>
      )
    }
}

class Child extends React.Component {
   handleActionParent = () => {
       console.log('called from parent')
   }
   render() {
      return (
           {/*...*/}
      )
   }
}

如果使用 React Hooks，您可以使用 useRef 和 useImperativeHandle 钩子。

在子组件中，添加钩子中的函数。

const Child = forwardRef((props, ref) => {

  const printSomething = () =>{
     console.log('printing from child function')
  }
  useImperativeHandle(ref, () => ({
    printSomething: printSomething
  }));

  return <h1>Child Component</h1>;
});

使用 ref 从父级调用公开的函数。

const Parent = () => {
  const childRef = useRef();

  return (
    <div>
      <Child ref={childRef} />
      <button onClick={() => childRef.current.printSomething()}>Click</button>
    </div>
  );
};

您可以将registerCallbackprops传递给您的孩子并从 componentDidMount 调用它并将引用传递给您的子组件方法，然后您可以随时调用它的方法