Zugriff auf Abschnittsdaten aus Abschnittselementen in reaktiven nativen SectionList

Question

Ich muss auf die Informationen bezüglich des Abschnitts (Index, Wert) innerhalb des Renderelements in reaktionsnativen SectionList zugreifen. Gemäß http://docs.w3cub.com/react_native/sectionlist/#renderitem können Abschnittsdetails über die renderItem-Funktion übergeben werden. Aber im unteren Code außer dem Punkt werden alle anderen Werte auf undefiniert gesetzt. Gibt es eine andere Möglichkeit, es zu tun?

render(){ 
      return(
       <SectionList 
        sections={this.props.itemList} 
        renderItem={(item,section) => this._renderNewItem(item,section)} 
        renderSectionHeader={this._renderSectionHeader} 
        keyExtractor={(item) => item.id} 
       /> 
      ) 
     } 

_renderNewItem(item,section){ 
     console.log(item, " ", section) 
    } 

Beispieldatenstruktur

Answer 1

renderItem prop leitet einen einzelnen Parameter an die Funktion. Dieser Parameter ist ein Objekt, das Element- und Abschnittsdaten enthält.

renderItem: (info: {Artikel: Artikel, Index: Nummer, Abschnitt: SectionT, Separatoren: {Highlight:() => void, hebt sie:() => void, updateProps: (wählen: 'führenden' | 'Hinter', newProps: Object) => Leere,},}) => React.Element

den Abschnitt Daten zu erhalten, können Sie es wie unten

renderItem={({ item, section }) => this._renderNewItem(item,section)} 

verwenden kann?

Aktualisieren

Hinzufügen eines Beispielbeispiels, um zu demonstrieren, wie es funktioniert. See it on snack.expo.io

import React, { Component } from 'react'; 
import { Text, View, StyleSheet, SectionList } from 'react-native'; 
import { Constants } from 'expo'; 
const data = [{key: 'New', data: [{name: 'Foo1'}, {name: 'Foo2'}]}, {key: 'Old', data: [{name:'Foo3'}, {name: 'Foo4'}]}]; 
export default class App extends Component { 

    _renderItem = ({item, section}) => (<Text>{`${item.name}(${section.key})`}</Text>) 

    _renderSectionHeader = ({section}) => { 
     return (
     <View style={styles.sectionHeader}> 
      <Text style={styles.header}>{section.key}</Text> 
     </View> 
    ) 
    } 

    render() { 
    return (
     <View style={styles.container}> 
     <SectionList 
      sections={data} 
      renderItem={this._renderItem} 
      renderSectionHeader={this._renderSectionHeader} 
     /> 
     </View> 
    ); 
    } 
} 

const styles = StyleSheet.create({ 
    container: { 
    flex: 1, 
    paddingTop: Constants.statusBarHeight, 
    backgroundColor: '#ecf0f1', 
    }, 
    sectionHeader: { 
     height: 50, 
     flex: 1, 
     backgroundColor: '#fff', 
     justifyContent: 'center', 
     paddingLeft: 10 
    }, 
    header: { 
     fontSize: 20, 
    } 
});