react在typescript下传递ref给子组件

## 在tsx下使用
默认情况下，我们不能在函数组件上使用 `ref` 属性，因为它们没有实例。

如果要在函数组件中使用 `ref`，可以使用 `forwardRef` 包裹组件函数使用（可与 `useImperativeHandle` 结合使用）。

被 forwardRef 包裹的组件函数除 `props`，还要多传入第二个参数：`ref`，即从外部传入的 ref。

`useImperativeHandle` 接收三个参数，第一个是 `forwardRef` 传入的 `ref`；第二个参数是 `handle` 函数，返回要向外暴露的值，通常是对象；第三个参数是`依赖数组`，根据依赖变化执行更新，非必需参数。

```
import { useRef, forwardRef, Ref, useImperativeHandle, ElementRef, useEffect } from "react";

// 组件，有两种定义类型的方式

// 组件1，一种是使用 forwardRef 的泛型
// forwardRef 泛型第一个参数是 Ref 类型，
// 第二个参数是 props 类型，不传时默认类型为{}，
// 注意，forwardRef 泛型与内部包裹函数的参数顺序恰恰相反，易造成歧义
const Component1 = forwardRef<HTMLInputElement, {}>((props, ref) => <input ref={ref} />);

// 组件2，另一种是是在函数参数上直接定义类型, **该方式验证有效**
// 注意，在函数参数上定义类型时，ref 参数类型需要使用Ref泛型包裹，而 forwardRef 泛型则不需要

const type useImperativeHandle返回的类型 = React.Ref<{
    sayHello: () => void
}>

// App
export default function App() {
  // 在父组件中使用时需要使用 ElementRef 泛型，并使用 typeof 获取组件的 ref 类型
  const textInputRef = useRef<ElementRef<typeof Component1>>(null);
  const helloRef: useImperativeHandle返回的类型 = useRef(null); // **该方式验证有效**
  
  useEffect(() => {
    // 聚焦textInputRef
    if (textInputRef.current) textInputRef.current.focus();
    // 调用helloRef的sayHello方法
    if (helloRef.current) helloRef.current.sayHello();
  }, []);
  return (
    <>
      <Component1 ref={textInputRef} />
      <Component2 ref={helloRef} />
    </>
  );
}
```

可以看到，有两种方式定义 `forwardRef` 组件的类型。

一种是在 `forwardRef` 泛型中定义 `ref` 类型与 `props` 类型，需要注意的是泛型中是 `ref` 类型在前，`props` 类型在后，而函数组件中是 `props` 在前，`ref` 在后。

另一种则是直接在函数组件的参数中定义类型，需要注意的是这种方式定义 `ref` 类型需要使用 `Ref` 泛型。

另外在父组件中，使用 `useRef` 时，则需要通过 `ElementRef` 泛型与 `typeof` 结合获取 ref 类型。

Leanote's Blog

Navigation

Recent Posts

Friend Links