Question

我的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中的该键？我想我只是错误地传递了值？

Answer 1

弄明白了，这很愚蠢。我认为这是keyExtractor的结果，但是我仍然可以像...一样单独传递密钥。

renderItem({item}) {
    return (
        <Item
            _key={item.key}
            {...item}
        />
    )
}

如何将密钥通过FlatList传递到其renderItem？

1 个答案: