DraggableFlatList onRef 使用 Typescript 获取错误类型

Question

我在 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}
...
    )
}

我收到以下 Typescript 错误：

类型 'MutableRefObject & { ...; }) | (函数组件<...> & { ...; }) | null>' 不可分配给类型 '(ref: RefObject) => void'。类型 'MutableRefObject & { ...; }) | (函数组件<...> & { ...; }) | null>' 不提供匹配的 签名 '(ref: RefObject): void'。 预期类型来自此处声明的属性“onRef” 在类型'IntrinsicAttributes & IntrinsicClassAttributes & Pick>> & 只读<...>, "ItemSeparatorComponent" | ... 150 更多 ... | "孩子"> & 部分<...> & 部分<...>'

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

Answer 1

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

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

因此，它显然需要一个函数而不是 RefObject。您也可以参考source code 来验证：

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

它期望一个函数将被赋予RefObject<FlatList<T>> 类型的引用。

您可以将代码改写为：

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

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

所以在flatListRef ref 中，通过它的current 属性，您将可以访问底层的FlatList ref。