如何在 React Native 和 TS 中输入 prop 接收到的 renderItem Flatlist？

发布于 2025-01-18 11:50:39 字数 1079 浏览 4 评论 0原文

我有一个组件horizontallist呈现以下内容：

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

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

//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> prop，我尝试了（）=＆gt; jsx.element，但在我收到错误：

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

原文

I have a component HorizontalList that render this:

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

this is my component file that receives the following props

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

but I dont know what type should be renderItem prop, I tried with () => JSX.Element , but in I get the error:

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

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

玩物 2025-01-25 11:50:39

你可以这样做；

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

或者，您可以从react> react-native中使用listrenderItem。

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

    // data prop type definition for FlatList

    data: ReadonlyArray<ItemT> | null | undefined;

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

当您还看到RenderItem和Data Props的类型DEFS时，您会注意到那些接收到完全相同的通用类型的人的道具。

You can do so;

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

or alternatively, you can make use of ListRenderItem from react-native.

For more alternatives, please see this discussion.

    // data prop type definition for FlatList

    data: ReadonlyArray<ItemT> | null | undefined;

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

When you also see the type defs for renderItem and data props, you will notice that props of those receiving exact same generic type.

回复收藏 0 原文

~没有更多了~