[英]React FlatList renderItem
I've seen this sort of syntax in JS before and I am just curious how it works.我以前在 JS 中见过这种语法,我只是好奇它是如何工作的。 In the React Native Docs for FlatList , an example calls renderItem.
在React Native Docs for FlatList 中,有一个调用 renderItem 的示例。 How does this._renderItem know that what individual list item it is working with?
this._renderItem 如何知道它正在使用哪个单独的列表项? It looks like item is being destructured, but from what object?
看起来 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 吗?
data prop - need to pass an array of data to the FlatList via the data prop
. data prop - 需要通过
data prop
将data prop
数组传递给FlatList 。 That's available on this.props.data.这在 this.props.data 上可用。
renderItem prop - Then you want to render the content with the renderItem
prop. renderItem 道具- 然后你想用
renderItem
道具渲染内容。 The function is passed a single argument, which is an object.该函数传递了一个参数,它是一个对象。 The data you're interested in is on the
item key
so you can use destructuring to access that from within the function.您感兴趣的数据位于
item key
因此您可以使用解构从函数内部访问它。 Then return a component using that data.然后使用该数据返回一个组件。
render() {
return (
<FlatList
data={this.state.data}
renderItem={({ item }) => (
// return a component using that data
)}
/>
);
}
adding to what @Balasubramanian stated, the renderItem
points to the current item
and since you are using a List
component as a wrapper then you can also use the 'ListItem' component inside the renderItem
function to render
the current item
's data, like so:添加@Balasubramanian 所说的内容,
renderItem
指向current item
并且由于您使用List
组件作为包装器,因此您还可以使用renderItem
函数内的“ListItem”组件来render
current item
的数据,如下所示:
renderItem={({ item, index }) => {
return (
<ListItem
key={index}
title={item.name}
onPress={ () => this.assetSelected(item) }
/>
);
}
<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
<ListItem
data={this.state.data}
key={(item,index)=>index.toString()}
renderItem={({ item }) => <YourComponent item={item}> }
/>
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>
);
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.