Question

我在父FlatList内呈现多个FlatList个孩子，如此

<FlatList
    data={parenttypes}
    renderItem={({item})=><View>
            <Text>{item.name}</Text>
            <FlatList
                data={childtypes}
                renderItem={({item})=><View>
                    <Text>HOW DO I ACCESS PARENT'S item here as well</Text>
                </View>}
            />      
    </View>}
/>

如何在子FlatList内访问父item个FlatList？

Answer 1

一个简单的解决方案是，不是使用子函数FlatList的箭头函数，而是创建单独的函数并将父数据绑定在子回调方法中。

像这样：

<FlatList
    data={parenttypes}
    renderItem={({item})=><View>
            <Text>{item.name}</Text>
            <FlatList
                data={childtypes}
                renderItem={this._renderChildItem.bind(this, item)}
            />      
    </View>}
/>

_renderChildItem(parentData, {item}) {
    console.log('data', parentData, item);
    return (    
        <View>
            <Text>HOW DO I ACCESS PARENT'S item here as well</Text>
        </View>
    )
}

不确定，但也尝试这个：

<FlatList
    data={parenttypes}
    renderItem={({item}) => { 
        let parentData = item;
        return (
            <View>
                <Text>{item.name}</Text>
                <FlatList
                    data={childtypes}
                    renderItem={({item}) => {
                        console.log('data', parentData, item);
                        return(
                            <View>
                                <Text>HOW DO I ACCESS PARENT'S item here as well</Text>
                            </View>
                        )
                    }
                />      
            </View>
        )
    }
/>

访问子FlatList内的父FlatList数据

1 个答案: