reactjs - 在 typescript 中处理 useRef(null) 的最佳方法

Question

所以，我得到了这个 titleRef

const titleRef = useRef<HTMLHeadingElement | null>(null);

它附在这个标题上:

<h1 ref={titleRef}>Hi!</h1>

我想用它来调整屏幕大小的样式，如下所示:

if (titleRef.current.style.offsetWidth > '10px') {...}

TS 不喜欢这样。见，useRef(null)表示 titleRef 可以等于 null (这很公平)所以我在任何地方使用titleRef ，我必须用类似的东西来解释这一点

if (titleRef.current) {
  ...do the thing
}` 

如果 titleRef经常被使用。

有没有更优雅的方法来处理这种情况？直接设置titleRef成为<h1>直接在 useRef 中的元素?或者，不使用 null ，通过useRef()一些“通用”HTMLHeadingElement ?

编辑:可选链接是我尝试的第一件事，但是，这似乎没有帮助:

编辑 2:添加 !确实会清除警告，但它也会使值变为静态并可能导致麻烦，具体取决于您的用例。

编辑 3:如果你要修改 titleRef.current，使用可选链接也会使 linter 发疯。 .

如果你不修改值，只读取它，那么 ?应该没问题，但如果不是......

TL;DR

虽然下面的答案在某些时间有效，但对我来说，缺点似乎不值得。现在，我将坚持使用我的垃圾邮件...

Answer 1

好的，我最终测试了这个。可选链接可以帮助您摆脱使代码膨胀的 if:

  const myTestRef = React.useRef<IFancyRef>(null);

  const handleClick = () => {
    myTestRef.current?.focus();
    // or
    myTestRef.current!.focus(); // this assumes you KNOW that myTestRef is assigned
  };

Here Codesandbox for you