父组件调用子组件方法

在 React 18 和 TypeScript 中，如果你想从父组件调用子组件的方法，你需要使用 useImperativeHandle Hook。这是一个示例：

首先，在你的子组件中，你需要定义一个方法，并在 useImperativeHandle 中返回它。这是一个简单的示例：

import React, { useState, useImperativeHandle } from 'react';

interface Props {
 onRef: (instance: any) => void;
}

interface State {
 count: number;
}

const MyComponent: React.FC<Props & State> = ({ onRef }) => {
 const [count, setCount] = useState(0);

 const increment = () => {
   setCount((prevCount) => prevCount + 1);
 };

 useImperativeHandle(onRef, () => {
   // 需要将暴露的接口返回出去
   return {
     func: increment,
   };
 });

 return (
   <div>
     <p>Count: {count}</p>
     <button onClick={increment}>Increment</button>
   </div>
 );
};

export default MyComponent;

然后，在你的父组件中，你可以通过 useRef 获取子组件的实例，并调用它的方法：

import React, { useState, useRef } from 'react';
import MyComponent from './MyComponent';

const ParentComponent: React.FC = () => {
 const myComponentRef = useRef<MyComponent>(null);

 const handleClick = () => {
   myComponentRef.current?.func();
 };

 return (
   <div>
     <MyComponent onRef={myComponentRef} />
     <button onClick={handleClick}>Call Child Method</button>
   </div>
 );
};

export default ParentComponent;

在这个示例中，我们首先在子组件中定义了一个名为 increment 的方法，并在 useImperativeHandle 中将其暴露给父组件。然后，在父组件中，我们通过 useRef 获取子组件的实例，并在需要时调用 increment 方法。