带有 React Native 的 TypeScript - 为什么 useEffect 需要“当前”检查？

Question

我正在使用带有 TypeScript 的 React Native，如果满足某些条件，我需要将焦点设置在输入上：

  const inputEl = React.useRef<TextInput>(null);

  React.useEffect(() => {
    if (isLast && inputEl && inputEl.current) {
      inputEl.current.focus();
    }
  }, []);

 return (
   <View>
    <TextInput
      ref={inputEl}
    />

上面的代码有效，但如果我删除 inputEl.current 检查，我会收到 TypeScript 错误：

  React.useEffect(() => {
    if (isLast && inputEl) {
      inputEl.current.focus();
    }
  }, []);

TS2531：对象可能为“空”。

为什么会这样？我正在检查inputEl 的存在，所以如果它确实存在，它不是总是有current 属性吗？

我的代码也是正确的还是应该将类型指定为：

const inputEl: React.RefObject<TextInput> = React.useRef(null);

Answer 1

useRef 确保inputEl 始终存在。但是，它的当前属性是可以为空的。您可以指定 current 属性最初为 null，方法是在此处将 null 作为参数传递 React.useRef(null);。 <TextInput> 组件在某些时候将 current 属性设置为它自己的 ref，但由于它的设置时间不确定，所以当 useEffect 读取它时它可能为 null。这就是为什么您需要检查inputEl.current 而不是inputEl。

您也可以像这样缩短代码：inputEl.current?.focus()。这相当于检查inputEl.current && inputEl.current.focus()。

此外，typescript 可以推断类型，useRef 是通用的，因此您可以像这样声明您的 ref： const inputEl = React.useRef<TextInput>(null)