反应平面列表渲染项
Posted
技术标签:
【中文标题】反应平面列表渲染项【英文标题】:React FlatList renderItem 【发布时间】:2018-01-07 19:42:29 【问题描述】:我以前在 JS 中看到过这种语法,我只是好奇它是如何工作的。在React Native Docs for FlatList 中,一个示例调用了renderItem。 this._renderItem 如何知道它正在使用的单个列表项?看起来项目正在被解构,但是来自什么对象?
_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
/>
);
换一种说法:在 FlatList 中,进行相同调用的另一种方式可能是:
<FlatList <other props> renderItem=(item) => (<MyListItem ....) />
renderItem 是一些特殊的道具,其中 item 将始终是解构的 arg 吗?
【问题讨论】:
【参考方案1】:data prop - 需要通过data prop
将一组数据传递给FlatList。这可以在 this.props.data 上找到。
renderItem 属性 - 然后你想用renderItem
属性渲染内容。该函数被传递一个参数,它是一个对象。您感兴趣的数据位于 item key
上,因此您可以使用解构从函数内访问这些数据。然后使用该数据返回一个组件。
render()
return (
<FlatList
data=this.state.data
renderItem=( item ) => (
// return a component using that data
)
/>
);
【讨论】:
【参考方案2】:<FlatList
data=['1', '2', '3', '4', '5', '6']
renderItem=( item ) => (
<Text> item </Text>
)
/>
输出 1 2 3 4 5 6
【讨论】:
【参考方案3】: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>
);
【讨论】:
【参考方案4】: <ListItem
data=this.state.data
key=(item,index)=>index.toString()
renderItem=( item ) => <YourComponent item=item>
/>
【讨论】:
应该是<YourComponent item=item />
,最后忘了/>
。【参考方案5】:
除了@Balasubramanian 所说的,renderItem
指向current item
,并且由于您使用List
组件作为包装器,因此您还可以在renderItem
函数中使用“ListItem”组件来render
current item
的数据,像这样:
renderItem=( item, index ) =>
return (
<ListItem
key=index
title=item.name
onPress= () => this.assetSelected(item)
/>
);
【讨论】:
以上是关于反应平面列表渲染项的主要内容,如果未能解决你的问题,请参考以下文章
使用 Redux 添加更多数据时,带有分页结果的平面列表会导致重新渲染