使用React本机列表的类型记录错误
使用React本机列表的类型记录错误
提问于 2022-08-25 04:29:26
当试图将类型记录与React本机列表一起使用时，我得到了以下错误：
Type '(item: navigationTypes) => JSX.Element' is not assignable to type 'ListRenderItem<unknown>'.这是我的代码：
type navigationTypes = {
name: string
href: string
}
const navigation = [
{ name: 'Support', href: '/support' },
{ name: 'Privacy Policy', href: '/privacy-policy' },
{ name: 'Terms Of Use', href: '/terms-of-use' },
{ name: 'Terms & Conditions', href: '/terms-&-conditions' },
]
const Item = ({ title = '', href = '' }) => (
<View>
<Text>
<TextLink href={href}>{title}</TextLink>
</Text>
</View>
)
const renderItem = (item: navigationTypes) => (
<Item title={item.name} href={item.href} />
)
<View>
<FlatList
horizontal
data={navigation}
renderItem={renderItem}
keyExtractor={(item) => item.id}
/>
</View>我对打字很陌生，所以我很难理解为什么这里会有问题。
回答 2
Stack Overflow用户
发布于 2022-08-25 05:01:07
该项作为对象的item属性传递给renderItem函数。这意味着您的函数签名不正确。
如果你把它写成内联，它看起来就像
renderItem={({ item }) => <Item title={item.name} href={item.href} />}或
const renderItem = ({ item }: { item: navigationTypes }) => (
<Item title={item.name} href={item.href} />
)Stack Overflow用户
发布于 2022-08-25 05:06:48
const obj = { a: 1, b: 2 };
const { a, b } = obj;
const renderItem = {(dataItem.item: navigationTypes) =>
为了避免这种情况，我们像这样对我们的对象进行了分解。
{item} = dataItem；
我们正在销毁传递给renderItem函数的项，而navigationTypes是它的类型。
const renderItem = {({item}: navigationTypes) =>
( <Item title={item.name} href={item.href} /> )}
<View>
<FlatList
horizontal
data={navigation}
renderItem={renderItem}
keyExtractor={(item) => item.id}
/>
</View>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/73481842
复制相关文章
相似问题
腾讯云开发者
