在子组件中反应本机VirtualList密钥提取器值

Question

如何从FlatList的子组件中手动设置密钥？我需要这个的原因是因为我所有的孩子都有Modal，并且我正在render()中返回一个数组。

<FlatList
    key={'partner-list'}
    data={_.values(this.props.partners)}
    renderItem={({item}) => <Card item={item} />}
    keyExtractor={(item, index) => item.id ? item.id.toString() : 'no id'}
/>

Card.js render（）

render(){
        return(
            [
            <Modal key={'partner-modal-???'} />,  <--- here
            <TouchableOpacity
                key={???}                         <--- and here
                onPress={() => {
                this.setModalVisible(true);
            }}>
                ...
            </TouchableOpacity>
            ]
        )
    }

Answer 1

您正在传递item作为道具，因此您应该能够在Card.js渲染器中使用item中的唯一字段？

render(){
        return(
            [
            <Modal key={`partner-modal-${this.props.item.id}`} />,  <--- here
            <TouchableOpacity
                key={`${this.props.item.id}`}                       <--- and here
                onPress={() => {
                this.setModalVisible(true);
            }}>
                ...
            </TouchableOpacity>
            ]
        )
    }