访问子 FlatList 中的父 FlatList 数据答案

【问题标题】：Access parent FlatList data inside child FlatList访问子 FlatList 中的父 FlatList 数据
【发布时间】：2017-12-30 17:13:51
【问题描述】：

我在父级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？

【问题讨论】：

不要在内部函数中使用解构，而是只需输入不同的参数名称：(otherItem) => ...，然后您可以引用封闭的item。

标签： javascript reactjs react-native

【解决方案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>
        )
    }
/>

【讨论】：

我采用了第二种方法。赞！！