我的 React native 应用程序上有一个提要屏幕,它有一个列表组件:
<List
refreshControl={
<RefreshControl
tintColor={'#E4E4E4'}
refreshing={this.state.loading}
onRefresh={this._onRefresh}
/>
}
onPressFooter={this.onEndReached}
data={this.state.posts}
/>
...从作为 FlatList 组件的 List.js 导入:
class List extends React.Component {
renderItem = ({ item }) => <Item {...item} />;
keyExtractor = item => item.key;
render() {
const { ...props } = this.props;
return (
<FlatList
ref={(ref) => { this.listRef = ref; }}
keyExtractor={this.keyExtractor}
renderItem={this.renderItem}
ListFooterComponent={footerProps => (
<Footer {...props} />
)}
showsVerticalScrollIndicator={false}
{...props}
/>
);
}
在 List.js 的 this.props 中,我可以访问 this.props.key,这是我的 Firebase 数据库中一行的键,但我无法访问 renderItem 中的那个键。在 Item.js 中,我只能访问存储在该行中的数据,而不能访问行唯一键。
如何访问 Item.js 中的那个 key ?我想我只是错误地传递了值?
最佳答案
想通了,那是愚蠢的。我认为这是 keyExtractor 的结果,但我仍然可以单独传递 key ,例如...
renderItem({item}) {
return (
<Item
_key={item.key}
{...item}
/>
)
}
https://stackoverflow.com/questions/56479950/
相关文章:
powerbi - 在 Power BI 中正确显示持续时间和格式
c# - 使用 AddOpenIdConnect 时,为什么要添加默认范围?
python - 使用 win32com.client 列出可用的消息属性
ionic-framework - ionic 应用程序上的 Youtube iframe 生成播放
laravel - 将 Laravel Vue 组件编译成不同的 js 文件
performance - LINQ AsNoTracking 运行缓慢
apache-spark - 加入 Spark 返回重复的隐式数据类型不匹配