![](/img/trans.png)
[英]FlatList implementation in React Native - renderItem functionality unclear? - undefined property
[英]understanding destructuring in renderItem property in <FlatList /> in React Native
我在网上遇到了以下 React Native 代码:
import React, { useState } from 'react';
import { StyleSheet, Text, View, FlatList } from 'react-native';
export default function App() {
const [people, setPeople] = useState([
{ name: 'shaun', id: '1' },
{ name: 'yoshi', id: '2' },
{ name: 'mario', id: '3' },
{ name: 'luigi', id: '4' },
{ name: 'peach', id: '5' },
{ name: 'toad', id: '6' },
{ name: 'bowser', id: '7' },
]);
return (
<View style={styles.container}>
<FlatList
numColumns={2}
keyExtractor={(item) => item.id}
data={people}
renderItem={({item}) => (
<Text style={styles.item}>{item.name}</Text>
)}
/>
</View>
);
}
我不太关注与renderItem
属性相关的代码段。 为什么我们使用解构语法{item}
。 这也是一个 object 解构语法(使用花括号),但在 object 解构中,我们使用键作为变量名。 所以恐怕我完全无法理解下面的片段。
<FlatList
numColumns={2}
keyExtractor={(item) => item.id}
data={people}
renderItem={({item}) => (
<Text style={styles.item}>{item.name}</Text>
)}
任何指导将不胜感激。
这个...
renderItem={({item}) => (
<Text style={styles.item}>{item.name}</Text>
)}
其实意思....
renderItem={(props) => (
<Text style={styles.item}>{props.item.name}</Text>
)}
这种技术称为 object 破坏检查以获取更多信息 - https://medium.com/podiihq/destructuring-objects-in-javascript-4de5a3b0e4cb
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.