如何从js函数中调用组件函数？

// 父组件
function ParentComponent() {
  const handleClick = () => {
    console.log('Parent component function called');
  };

  return (
    <ChildComponent handleClick={handleClick} />
  );
}

// 子组件
function ChildComponent(props) {
  const { handleClick } = props;

  const handleButtonClick = () => {
    handleClick();
  };

  return (
    <button onClick={handleButtonClick}>Call Parent Function</button>
  );
}

// 组件
class MyComponent extends React.Component {
  myFunction() {
    console.log('Component function called');
  }

  render() {
    return (
      <div>My Component</div>
    );
  }
}

// 使用ref调用组件函数
function callComponentFunction() {
  const componentRef = useRef(null);

  const handleClick = () => {
    componentRef.current.myFunction();
  };

  return (
    <div>
      <MyComponent ref={componentRef} />
      <button onClick={handleClick}>Call Component Function</button>
    </div>
  );
}

// 组件
function MyComponent() {
  const myFunction = () => {
    console.log('Component function called');
  };

  return (
    <div>My Component</div>
  );
}

// 使用Hooks调用组件函数
function callComponentFunction() {
  const [component, setComponent] = useState(null);

  const handleClick = () => {
    component.myFunction();
  };

  useEffect(() => {
    setComponent(<MyComponent />);
  }, []);

  return (
    <div>
      {component}
      <button onClick={handleClick}>Call Component Function</button>
    </div>
  );
}