admin 管理员组

文章数量: 1086019

I am rendering multiple FlatList children inside a parent FlatList like so

<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>}
/>

How can I access parent FlatList's item inside child FlatList?

I am rendering multiple FlatList children inside a parent FlatList like so

<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>}
/>

How can I access parent FlatList's item inside child FlatList?

  • javascript
  • reactjs
  • react-native
Share Improve this question asked Dec 30, 2017 at 17:13 SinghSingh 1,9883 gold badges22 silver badges31 bronze badges 1
  • Don't use destructuring in the inner function, and instead just put a different parameter name: (otherItem) => ... then you can reference the enclosing item. – Kraylog Commented Dec 30, 2017 at 17:39
Add a ment  | 

1 Answer 1

Reset to default 9

One simple solution is, instead of using arrow function for child FlatList, create separate function and bind the parent data inside child callback method.

Like this:

<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>
    )
}

Not sure but try this one also:

<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>
        )
    }
/>

本文标签： javascriptAccess parent FlatList data inside child FlatListStack Overflow

版权声明：本文标题：javascript - Access parent FlatList data inside child FlatList - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.roclinux.cn/p/1744098845a2533402.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。