在 React 自定义钩子中正确输入 useRef 值

Question

我有一个自定义钩子，它在我的 TS 应用程序中返回值 useRef。不幸的是，它抱怨我返回的 ref 的类型，我不知道如何正确输入。

这就是我的钩子的样子：

interface MyHookInterface {
    someBooleanState: boolean
    myRef: HTMLElement | null
}

  
const useMyHook = (): MyHookInterface => {
    const [someBooleanState, setSomeBooleanState] = useState<boolean>(false)
    const myRef = useRef<HTMLElement | null>(null)
  
    useEffect(() => {
      const el = myRef.current // what type should this be?
      // Complaining that el possibly undefined 
      if(el?.offsetWidth < el?.scrollWidth){
          // do stuff
      }
    }, [])
  
    return {
        someBooleanState,
        myRef, // Getting: Type 'MutableRefObject<HTMLElement | null>' is missing the following properties from type 'HTMLElement': accessKey, accessKeyLabel, autocapitalize, dir, and 234 more
    }
  }
  

正如您在 cmets 中看到的，我的钩子有一些与打字有关的错误：

1- 不知道如何在界面中输入myRef。请记住，它是用于多种类型的 HTML 元素，所以我不能在这里指定它是 div 还是什么。

2- 不知道如何输入el，但对其属性的访问抱怨它是undefined

如何在我的钩子中正确键入这些值？

Answer 1

这是因为 ref 的值存储在“.current”属性下。

即

const Comp = () => {
...
    const refVal = React.useRef(2);
    console.log(2 === refVal); // false
    console.log(2 === refVal.current); // true
...
}

解决方案取决于您的意图 - 如果您想返回 ref 本身，请按照类型错误的建议将接口的类​​型更改为 MutableRefObject<HTMLElement | null>，否则，将返回值替换为：

    return {
        someBooleanState,
        myRef: myRef.current,
    }

如果 el 尚未定义（即尚未分配），您可能会收到 undefineds，因为您使用 ?. 运算符访问属性（需要明确的是，这是正确的。

例如

null?.test === undefined; // true

要解决这个问题，请检查 el 是否已定义且可选（尽管接口的定义并不要求这样做），检查两个值是否已定义且均为数字（即使用 el && !isNaN(el?.offsetWidth) && !isNaN(el?.scrollWidth) && el.offsetWidth < el.scrollWidth。或者，使用 nullish 合并运算符 if这适用于您的用例，即(el?.offsetWidth ?? 0) < (el?.scrollWidth ?? 0)。

Answer 2

ref 的类型不仅仅是它所引用的对象。这是一个React.MutableRefObject，它包含了它所引用的内容。这就是提供 current 属性的原因，因此 ref 可以工作。

如果您仔细考虑myRef，您应该会看到您需要的类型。在这种情况下：

React.MutableRefObject<HTMLElement | null>

这会让你的钩子返回如下类型：

interface MyHookInterface {
    someBooleanState: boolean
    myRef: React.MutableRefObject<HTMLElement | null>
}

---

其次，这个不起作用的原因：

  const el = myRef.current // what type should this be?
  
  // Complaining that el possibly undefined 
  if(el?.offsetWidth < el?.scrollWidth){
      // do stuff
  }

是因为你的 ref 可能还没有被赋值。这意味着el?.offsetWidth 是undefined，因为el 仍然是null。而undefined 不是< 比较中的有效操作数。 （if (undefined < undefined) 没有多大意义）

您可以通过在进行比较之前检查以确保 el 存在来轻松解决此问题：

  if (el && el.offsetWidth < el.scrollWidth){
      // do stuff
  }

Working example