web-dev-qa-db-fra.com

Réagir à la FlatList renderItem

J'ai déjà vu ce type de syntaxe dans JS et je suis curieux de savoir comment cela fonctionne. Dans React Native Docs for FlatList, un exemple appelle renderItem. Comment this._renderItem sait-il quel élément de la liste avec lequel il travaille? On dirait que l'objet est en train d'être déstructuré, mais à partir de quel objet?  Example from React Native Docs

Autrement dit: dans Flatlist, une autre façon de passer le même appel pourrait être:

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

Est-ce que renderItem est un accessoire spécial où {item} sera toujours l'argument déstructuré?

javascriptreactjsreact-nativereact-native-flatlist
5
Julian

data prop - besoin de transmettre un tableau de données à la FlatList via le data prop. C’est disponible sur this.props.data.

renderItem prop - Ensuite, vous voulez rendre le contenu avec la propriété renderItem. La fonction reçoit un seul argument, qui est un objet. Les données qui vous intéressent se trouvent dans le item key. Vous pouvez donc utiliser la déstructuration pour y accéder depuis la fonction. Retournez ensuite un composant en utilisant ces données.

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

en ajoutant à ce que @Balasubramanian a déclaré, le renderItem pointe sur le current item et puisque vous utilisez un composant List comme wrapper, vous pouvez également utiliser le composant 'ListItem' dans la fonction renderItem pour render les données de current item,

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

Sortie 1. 2 3 4 5 6

1
Keshav Gera