將“useCallback”用於回調引用時，您將如何正確設置 TypeScript 聲明？

Question

我正在開發一個 React + TypeScript 項目，我在其中引入了提供的“ 我如何測量 DOM 節點？ ”示例，但我似乎無法讓 React 的類型承認有人會將useCallback的返回值作為ref useCallback 。 我在這個 CodeSandbox 中重新創建了它的基本用法。 如果你打開它，你應該在這一行看到 TypeScript 錯誤指示器：

<div ref={ref} className="App">

究竟應該如何設置類型以使其有效，或者@types/react包中是否缺少某些內容？

Answer 1

首先在useCallback中的節點類型中添加null並將as const添加到返回的數組中，這會將返回的數組類型為元組（記住類型的順序），而不是使其成為多種類型的數組

function useClientRect() {
  const [rect, setRect] = useState<ClientRect>();

  const ref = useCallback((node: HTMLElement | null) => {
    if (node !== null) {
      setRect(node.getBoundingClientRect());
    }
  }, []);

  return [rect, ref] as const;
}

Answer 2

將useClientRect鈎子的返回類型設置為[ClientRect | undefined, (node: HTMLDivElement) => void] [ClientRect | undefined, (node: HTMLDivElement) => void]並將useCallback參數類型useCallback為HTMLDivElement ：

// packages
import { useCallback, useState } from "react";

function useClientRect(): [
  ClientRect | undefined,
  (node: HTMLDivElement) => void
] {
  const [rect, setRect] = useState<ClientRect>();

  const ref = useCallback((node: HTMLDivElement) => {
    if (node !== null) {
      setRect(node.getBoundingClientRect());
    }
  }, []);

  return [rect, ref];
}

export default useClientRect;

Answer 3

在您的use-client-react您已將ClientRect作為不存在的類型傳遞。 以下對我來說很好。

import { useCallback, useState } from "react";

function useClientRect() {
  const [rect, setRect] = useState();

  const ref = useCallback((node: HTMLDivElement) => {
    if (node !== null) {
      setRect(node.getBoundingClientRect());
    }
  }, []);

  return [rect, ref];
}

export default useClientRect;