时间戳

首页 > 解决方案 > DraggableFlatList onRef 使用 Typescript 获取错误类型

reactjs - DraggableFlatList onRef 使用 Typescript 获取错误类型

问题描述

我在 ReactNative 中使用 react-native-draggable-flatlist。我对 FlatList 的引用感兴趣，以便可以对其执行 scrollToIndex 。使用以下代码：

import React, {
    useEffect, createRef, useRef,
} from 'react'
import { ScrollView, FlatList } from 'react-native-gesture-handler'
import DraggableFlatList, {
    RenderItemParams, DragEndParams,
} from "react-native-draggable-flatlist"

export default function TasksList(props: Props) {

    const ref = createRef<DraggableFlatList<ITask>>()
    const flatListRef = useRef<FlatList<ITask> | null>(null)

    return (
        <DraggableFlatList
            ref={ref}
            onRef={flatListRef}
...
    )
}

我收到以下打字稿错误：

类型 'MutableRefObject<(ComponentClass<FlatListProps & NativeViewGestureHandlerProps & RefAttributes, any> & { ...; }) | (函数组件<...> & { ...; }) | null>' 不可分配给类型 '(ref: RefObject<FlatList>) => void'。类型 'MutableRefObject<(ComponentClass<FlatListProps & NativeViewGestureHandlerProps & RefAttributes, any> & { ...; }) | (函数组件<...> & { ...; }) | null>' 不匹配签名 '(ref: RefObject<FlatList>): void'。预期的类型来自属性 'onRef'，它在类型 'IntrinsicAttributes & IntrinsicClassAttributes<DraggableFlatList> & Pick<Readonly<Modify<FlatListProps, { ...; } & 部分<...>>> & 只读<...>, "ItemSeparatorComponent" | ... 150 更多 ... | “孩子”> & 部分<...> & 部分<...>'

如何修复错误以便我可以使用 ref/onRef？

标签： reactjstypescriptreact-nativereact-native-flatlistreact-native-draggable-flatlist

解决方案

我相信你没有得到什么onRef道具期望到达这里。如果您仔细查看错误，它会说类似这样的内容：

'MutableRefObject<FlatList<ITask> | null>' is not 
    assignable to type '(ref: RefObject<FlatList<ITask>>) => void'.

因此，它显然需要一个函数而不是一个RefObject. 您还可以参考源代码来验证：

    ...
    onRef?: (ref: React.RefObject<FlatList<T>>) => void;
    ...

它需要一个函数，该函数将被赋予RefObject<FlatList<T>>类型的 ref。

您可以将代码改写为：

    ....
    const ref = createRef<DraggableFlatList<ITask>>()
    const flatListRef = useRef<React.RefObject<FlatList<ITask>> | null>(null)

    return (
        <DraggableFlatList
            ref={ref}
            onRef={(ref) => { flatListRef.current = ref }}

因此，在flatListRefref内部，current您可以通过它的属性访问底层的FlatList ref.

推荐阅读