wake-up-neo.com

Reagieren Sie FlatList renderItem

Ich habe diese Art von Syntax bereits in JS gesehen und bin nur neugierig, wie es funktioniert. In React Native Docs für FlatList werden in einem Beispiel renderItem aufgerufen. Woher weiß this._renderItem, mit welchem ​​einzelnen Listenelement es arbeitet? Es sieht so aus, als würde ein Gegenstand zerstört werden, aber von welchem ​​Gegenstand?  Example from React Native Docs

Anders ausgedrückt: In Flatlist könnte eine andere Möglichkeit für denselben Anruf bestehen:

<FlatList <other props> renderItem={({item}) => (<MyListItem ....) />

Ist renderItem eine besondere Eigenschaft, bei der {item} immer das destruierte Argument ist?

5
Julian

data prop - muss ein Array von Daten an die FlatList über den data prop übergeben. Das ist auf this.props.data verfügbar.

renderItem prop - Dann möchten Sie den Inhalt mit der Variable renderItem rendern. Der Funktion wird ein einzelnes Argument übergeben, das ein Objekt ist. Die Daten, an denen Sie interessiert sind, befinden sich im item key, sodass Sie mit der Destrukturierung auf diese Daten innerhalb der Funktion zugreifen können. Dann eine Komponente mit diesen Daten zurückgeben.

render() {
 return (
    <List>
      <FlatList
        data={this.state.data}
        renderItem={({ item }) => (
          // return a component using that data
        )}
      />
    </List>
 );
}
3
Balasubramanian

zusätzlich zu den Angaben von @Balasubramanian zeigt die renderItem auf den current item. Da Sie eine List-Komponente als Wrapper verwenden, können Sie auch die 'ListItem'-Komponente in der renderItem-Funktion verwenden, um render die current item-Daten zu verwenden, z.

renderItem={({ item, index }) => {
  return (
     <ListItem
        key={index}
        title={item.name}
        onPress={ () => this.assetSelected(item) }
      />
  );
}
2
Luis-Carlos
  <FlatList
                data={['1', '2', '3', '4', '5', '6']}
                renderItem={({ item }) => (
                  <Text>{ item }</Text>
                )}
            />

Ausgabe 1 2 3 4 5 6

1
Keshav Gera
 <ListItem
    data={this.state.data}
    key={(item,index)=>index.toString()}
    renderItem={({ item }) => <YourComponent item={item}> }
  />
0
Idan