typescript - ReactNative Animated.ScrollView ref TypeScript 定义

Question

在 React Native 组件中，我有：<Animated.ScrollView ref={cardRef} ... />.

当我将鼠标悬停在上面时，ref我看到(JSX attribute) React.ClassAttributes<Animated.ScrollView>.ref?: React.LegacyRef<Animated.ScrollView> | undefined了，所以我像这样创建了 ref，const cardRef = useRef<React.RefObject<Animated.ScrollView> | undefined>(undefined);但是这样做cardRef.current?.scrollTo({ x: newOffset });会给我一个警告scrollTo：Property 'scrollTo' does not exist on type 'RefObject<ScrollView>'。

我怎么知道正确的 TS 定义应该是什么？有没有办法或者它总是一个猜谜游戏？

标签： typescriptreact-native

Answer 1

你快到了。泛型类型参数 onuseRef用于 this 所引用的类型。换句话说，.current属性的类型。您不需要包含RefObject在泛型中，因为它已经知道它创建了一个RefObject. 它只需要知道它正在创建什么类型。RefObject

您当前的类型是说它正在创建一个RefObject其.current属性是 aRefObject并且 ref 的.current属性是ScrollView.

通过查看类型声明和检查错误消息，您会发现一个小技巧，这null是任何元素 ref 的可接受值。因此，您可以将null其用作初始值，而不必包含 | undefined在类型中。

你应该改变：

const cardRef = useRef<React.RefObject<Animated.ScrollView> | undefined>(undefined);

到：

const cardRef = useRef<Animated.ScrollView>(null);