一起使用 useRef 和forwardRef 的正确方法是什么？

Question

我有两个组件：App和Child。我使用useRefhook 来获取组件中的 DOM 元素Child并对其进行一些处理。

我还使用API在组件之间ref传递。AppChildReact.forwardRef

App.tsx：

import { useRef } from "react";
import Child from "./Child";

export default function App() {
  const ref = useRef(null);
  console.log("App ref: ", ref);
  return (
    <div className="App">
      <Child ref={ref} />
    </div>
  );
}

Child.ts：

import React, { useEffect, useRef } from "react";

export default React.forwardRef((props, ref) => {
  const innerRef = useRef<HTMLDivElement>(null);
  const divElement = ref || innerRef; // TSC throw error here.
  useEffect(() => {
    if (divElement.current) {
      console.log("clientWidth: ", divElement.current.clientWidth);
      // do something with divElement.current
    }
  }, []);
  return <div ref={divElement}></div>;
});

我不确定这是像上面一样使用innerRef和转发的正确方法ref。至少，TSC 会抛出一个错误，这意味着它不允许这样使用它。

类型 '((实例：未知) => void) | MutableRefObject' 不可分配给类型 'string | ((实例：HTMLDivElement | null) => void) | 参考对象 | 空 | 不明确的'。类型“MutableRefObject”不可分配给类型“string |” ((实例：HTMLDivElement | null) => void) | 参考对象 | 空 | 不明确的'。类型“MutableRefObject”不可分配给类型“RefObject”。“当前”属性的类型不兼容。类型“未知”不可分配给类型“HTMLDivElement |” 无效的'。类型“unknown”不可分配给类型“HTMLDivElement”.ts(2322) index.d.ts(143, 9)：预期类型来自属性“ref”，该属性在类型“DetailedHTMLProps<HTMLAttributes, HTMLDivElement>”上在此处声明'

我想在组件中获得正确的引用，并在子组件中App使用它。ref我怎样才能做到这一点？

代码沙盒

Answer 1

您可以在很大程度上忽略 TS 错误，因为您没有为 forwardRef 参数提供类型，因此它不知道 ref/innerRef 是等效类型的。

const divElement = ref || innerRef; <div ref={divElement}></div>

我不明白这一点 - 你是否希望它直接引用 div 元素，无论是否给出 ref ？

无论如何，我认为如果你想让它像这样工作，最好使用useImperativeHandle像这样的钩子useImperativeHandle(ref, () => innerRef.current);

因此，子组件本身使用 来管理引用，innerRef但如果有人确实将引用传递给子组件，它将产生该引用。

export default React.forwardRef((props, ref) => {
  const innerRef = useRef<HTMLDivElement>(null);

  useImperativeHandle(ref, () => innerRef.current);

  useEffect(() => {
    if (innerRef.current) {
      console.log("clientWidth: ", innerRef.current.clientWidth);
    }
  }, []);

  return <div ref={innerRef}></div>;
});