我在視圖上使用參考。Typescript 給我一個錯誤“物件可能是‘空’”。視圖上使用的 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);
},[]);
uj5u.com熱心網友回復：
我不認為它真的是 TypeScript 問題，而更多是初始化問題。當您嘗試訪問您的 ref 時，您會以訪問物件及其 null 而不是物件的方式進行訪問，從而引發您得到的錯誤。您可以驗證 ref 不是 null，也可以將其初始化為某個物件，以便您可以正確查詢其屬性：
// this
const ref = React.useRef({});
// or this
const ref = React.useRef(null);
React.useLayoutEffect(()=>{
if(ref.current !== null){
//do stuff
}
},[]);
uj5u.com熱心網友回復：
這是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);
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/372329.html