ts中父组件如何调用子组件的内部方法

在 TypeScript 中，父组件可以调用子组件的内部方法，需要先通过`ref`引用子组件，然后使用引用调用子组件的方法。以下是一个示例：

import React, { useRef } from "react";

interface ChildProps {
  // 子组件的方法声明
  doSomething: () => void;
}

const ChildComponent: React.FC<ChildProps> = ({ doSomething }) => {
  // 子组件的逻辑代码
  // ...

  return <div>Child Component</div>;
};

const ParentComponent: React.FC = () => {
  const childRef = useRef<ChildProps>(null);

  const handleClick = () => {
    // 调用子组件的方法
    if (childRef.current) {
      childRef.current.doSomething();
    }
  };

  return (
    <div>
      <ChildComponent ref={childRef} />
      <button onClick={handleClick}>Call Child Method</button>
    </div>
  );
};

export default ParentComponent;

在上面的示例中，父组件`ParentComponent`通过`useRef`创建了一个子组件的引用`childRef`。然后，在父组件中定义了一个点击按钮的事件处理函数`handleClick`，该函数通过`childRef.current`访问子组件的实例，并调用子组件的方法`doSomething()`。

请注意，为了使子组件能够被引用，需要使用`React.forwardRef`函数将子组件包装一层。在上面的示例中，我们使用了函数式组件和钩子来定义父、子组件，但原理适用于其他方式定义的组件。