[英]understanding destructuring in renderItem property in <FlatList /> in React Native
I came across the following React Native code online:我在网上遇到了以下 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>
);
}
I do not quite following the snippet related to the renderItem
property.我不太关注与
renderItem
属性相关的代码段。 why are we using the destructuring syntax {item}
.为什么我们使用解构语法
{item}
。 Also this is an object destructuring syntax (using curly braces), but in object destructuring we use keys as variable names.这也是一个 object 解构语法(使用花括号),但在 object 解构中,我们使用键作为变量名。 So I am afraid I am completley at a loss to understand the snippet below.
所以恐怕我完全无法理解下面的片段。
<FlatList
numColumns={2}
keyExtractor={(item) => item.id}
data={people}
renderItem={({item}) => (
<Text style={styles.item}>{item.name}</Text>
)}
Any guidance would be appreciated.任何指导将不胜感激。
this...这个...
renderItem={({item}) => (
<Text style={styles.item}>{item.name}</Text>
)}
actually mean....其实意思....
renderItem={(props) => (
<Text style={styles.item}>{props.item.name}</Text>
)}
This technique is called object destruction check out for more info - https://medium.com/podiihq/destructuring-objects-in-javascript-4de5a3b0e4cb这种技术称为 object 破坏检查以获取更多信息 - https://medium.com/podiihq/destructuring-objects-in-javascript-4de5a3b0e4cb
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.