打字稿：React Native useRef 给出错误“对象可能为空”

Question

我在视图上使用 ref。打字稿给我一个错误“对象可能是‘空’”。视图上使用的 ref 的正确类型是什么？具体来说，我使用的是Animated.View，但我认为这没有什么不同。

此处的其他答案适用于 ReactJS(web) 并使用 const overlayEl = useRef<HTMLDivElement>(null);，但我正在寻找 React Native 的答案。

const Component = () => {
  const ref = React.useRef(null);

  React.useLayoutEffect(()=>{
    console.log(ref.current.clientHeight); 
    // ^ Error: "Object is possibly null" on the `ref.current` portion
  },[]);

  return (
    <Animated.View ref={ref} style={{height: 100}}></Animated.View>
  );
}

我尝试过的事情：

const ref = React.useRef<React.FunctionComponent>(null);
const ref = React.useRef<React.ReactElement>(null);
const ref = React.useRef<React.MutableRefObject<null>>(null);
const ref = React.useRef(null) as React.MutableRefObject<null>;
console.log(ref?.current?.clientHeight); 
// ^ Error: Property clientHeight does not exist on type 'never'

唯一有效的是这个，但这并不是真正的正确修复

  React.useLayoutEffect(()=>{
    const current = ref?.current || { clientHeight: 0 }; 
    console.log(ref.current.clientHeight);
  },[]);

Answer 1

我不认为它真的是 TypeScript 问题，而更多的是初始化问题。当您尝试访问您的 ref 时，您会以访问对象及其 null 而不是对象的方式这样做，从而引发您得到的错误。 您可以验证 ref 是否为空，或者将其初始化为某个对象，以便您可以正确查询其属性：

// this
const ref = React.useRef({});



// or this
const ref = React.useRef(null);
React.useLayoutEffect(()=>{
    if(ref.current !== null){
       //do stuff
    }
  },[]);

Answer 2

这是useRef 在 React 中的输入方式：

function useRef<T>(initialValue: T): MutableRefObject<T>;

interface MutableRefObject<T> {
    current: T;
}

这意味着一旦输入MutableRefObject，它就会始终保持其类型，因此您必须使用尖括号正确输入：

const ref = React.useRef<React.ElementRef<typeof View> | null>(null);