如何键入renderItem Flatlist接收到的道具在反应本地和TS？

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;
  }

或者，您也可以使用来自react-native的react-native。

有关更多替代方案，请参见此discussion。

    // data prop type definition for FlatList

    data: ReadonlyArray<ItemT> | null | undefined;

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

当您还看到renderItem和data道具的类型defs时，您会注意到那些接收相同泛型的道具。