有没有办法知道 TypeScript 中来自父元素的 props 的确切类型？

Question

我正在使用 TypeScript 和 React Native 来开发移动应用程序。 为了恢复前一屏幕的滚动位置，我创建了一个变量并分配

useRef()

来处理滚动。 ref 属性的类型是什么？ 我将在下面分享我的代码。

const sectionListRef = useRef();
...
sectionListRef.current.ScrollToLocation // <-- Property 'scrollToLocation' does not exist on type 'never';

我不知道应该是哪种类型... 有人可以告诉我为什么会发生这个错误以及如何解决这个问题吗？

Answer 1

我确实为FlatList找到了类似的

解决方案

，也许尝试一下这是否有帮助：

const sectionListRef = useRef<SectionList>(null);

使用

.scrollToLocation()

时：

更多关于

scrollToLocation

sectionListRef.current?.scrollToLocation(param);

虽然我找不到任何官方指南，但希望这些能作为参考有所帮助。

Answer 2

这个语法也许对你有帮助：

例如：

const someRef = useRef<Your Type>(Your Initial Value);

您应该指定类型和初始值。

Answer 3

您可以使用

ComponentRef<T extends ElementType>

类型来推断 ref 类型。

import { useRef } from 'react';
import type { ComponentRef } from 'react';
import { Text, View, SafeAreaView, SectionList } from 'react-native';

const DATA = [
  {
    title: 'Main dishes',
    data: ['Pizza', 'Burger', 'Risotto'],
  },
  {
    title: 'Sides',
    data: ['French Fries', 'Onion Rings', 'Fried Shrimps'],
  },
  {
    title: 'Drinks',
    data: ['Water', 'Coke', 'Beer'],
  },
  {
    title: 'Desserts',
    data: ['Cheese Cake', 'Ice Cream'],
  },
];

const App = () => {
  const sectionListRef = useRef<ComponentRef<typeof SectionList>>();
  sectionListRef.current?.scrollToLocation({ itemIndex: 0, sectionIndex: 1 });

  return (
    <SafeAreaView>
      <SectionList
        sections={DATA}
        keyExtractor={(item, index) => item + index}
        renderItem={({ item }) => (
          <View>
            <Text>{item}</Text>
          </View>
        )}
        renderSectionHeader={({ section: { title } }) => <Text>{title}</Text>}
      />
    </SafeAreaView>
  );
};

export default App;

游乐场