如何在 react native 和 TS 中输入 prop 收到的 renderItem Flatlist？

Question

我有一个组件HorizontalList呈现这个：

<HorizontalList
  data={categories}
  renderItem={renderCategories}
  titleList={'Categories'}
/>

这是我的组件文件，它接收以下道具

//HorizontalList.tsx

interface Props {
  titleList: string;
  data: object[];
  renderItem: <--- //IDK what type should be here;
}

const HorizontalList: React.FC<Props> = ({titleList, data, renderItem}) => {
  return (
    <View style={styles.root}>
      <Text style={styles.titleText}>{titleList}</Text>
      <FlatList horizontal data={data} renderItem={renderItem} />
    </View>
  );
};

但我不知道什么类型应该是renderItem道具，我尝试使用() => JSX.Element ，但是我得到了错误：

Type '({ item }: { item: ICategorieItem; }) => JSX.Element' is not assignable to type '() => Element'.

Answer 1

你可以这样做；

  interface Props {
    titleList: string;
    data: ICategorieItem[];
    renderItem: ({
      item: ICategorieItem,
      index: number,
    }) => React.ReactElement;
  }

或者，您可以使用ListRenderItem中的react-native 。

有关更多替代方案，请参阅此讨论。

    // data prop type definition for FlatList

    data: ReadonlyArray<ItemT> | null | undefined;

    // renderItem prop type definition
    renderItem: ListRenderItem<ItemT> | null | undefined;

当您还看到renderItem和data道具的类型定义时，您会注意到那些接收完全相同的通用类型的道具。