DraggableFlatList onRef 使用 Typescript 获取错误类型

Posted 2023-03-13

【中文标题】DraggableFlatList onRef 使用 Typescript 获取错误类型

【英文标题】：DraggableFlatList onRef getting a wrong type with Typescript

【发布时间】：2021-08-30 01:18:00

【问题描述】：

我在 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？

【参考方案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。

【讨论】：

谢谢阿列克斯！毫无疑问，我不知道自己在做什么 ;-) 在你的帮助下，我现在知道了。