Javascript 反应 FlatList 渲染项
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/45429361/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
React FlatList renderItem
提问by Julian
I've seen this sort of syntax in JS before and I am just curious how it works. In the React Native Docs for FlatList, an example calls renderItem. How does this._renderItem know that what individual list item it is working with? It looks like item is being destructured, but from what object?
我以前在 JS 中见过这种语法，我只是好奇它是如何工作的。在React Native Docs for FlatList 中，有一个调用 renderItem 的示例。this._renderItem 如何知道它正在使用哪个单独的列表项？看起来 item 正在被解构，但是来自什么对象？
_renderItem = ({item}) => (
<MyListItem
id={item.id}
onPressItem={this._onPressItem}
selected={!!this.state.selected.get(item.id)}
title={item.title}
/>
);
render() {
return (
<FlatList
data={this.props.data}
extraData={this.state}
keyExtractor={this._keyExtractor}
renderItem={this._renderItem}
/>
);
}
Put differently: in FlatList, another way to make this same call could be:
换句话说：在 FlatList 中，进行相同调用的另一种方法可能是：
<FlatList <other props> renderItem={({item}) => (<MyListItem ....) />
Is renderItem some special prop where {item} will always be the destructured arg?
renderItem 是一些特殊的道具，其中 {item} 将始终是解构的 arg 吗？
采纳答案by Balasubramanian
data prop- need to pass an array of data to the FlatListvia the data prop. That's available on this.props.data.
数据丙-需要数据的数组传递到FlatList经由data prop。这在 this.props.data 上可用。
renderItem prop- Then you want to render the content with the renderItemprop. The function is passed a single argument, which is an object. The data you're interested in is on the item keyso you can use destructuring to access that from within the function. Then return a component using that data.
renderItem 道具- 然后你想用renderItem道具渲染内容。该函数传递了一个参数，它是一个对象。您感兴趣的数据在 上，item key因此您可以使用解构从函数内部访问它。然后使用该数据返回一个组件。
render() {
return (
<List>
<FlatList
data={this.state.data}
renderItem={({ item }) => (
// return a component using that data
)}
/>
</List>
);
}
回答by Luis-Carlos
adding to what @Balasubramanian stated, the renderItempoints to the current itemand since you are using a Listcomponent as a wrapper then you can also use the 'ListItem' component inside the renderItemfunction to renderthe current item's data, like so:
添加到什么@Balasubramanian所述，renderItem指向current item既然你正在使用List组件作为一个包装，那么你也可以使用“列表项”组件的内部renderItem功能render的current item的数据，就像这样：
renderItem={({ item, index }) => {
return (
<ListItem
key={index}
title={item.name}
onPress={ () => this.assetSelected(item) }
/>
);
}
回答by Keshav Gera
<FlatList
data={['1', '2', '3', '4', '5', '6']}
renderItem={({ item }) => (
<Text>{ item }</Text>
)}
/>
Output 1 2 3 4 5 6
输出 1 2 3 4 5 6
回答by Idan
<ListItem
data={this.state.data}
key={(item,index)=>index.toString()}
renderItem={({ item }) => <YourComponent item={item}> }
/>
回答by Parveen Chauhan
import { places } from '../data/DataArray';
export const Home = (props) => {
const renderPlace = ({ item }) => (
<TouchableOpacity onPress={() => props.navigation.navigate('SingleTour')}>
<Text style={styles.item}>{item.name}</Text>
</TouchableOpacity>
);
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<FlatList
data={places}
renderItem={
renderPlace
}
/>
</View>
);
}
