web-dev-qa-db-fra.com

Comment boucler et rendre des éléments dans React-native?

Est-il possible de boucler un composant identique dans la fonction Render?

Quelque chose comme ça:

...

onPress = () => {
 ...
};

initialArr = [["blue","text1"],["red","text2"]];
buttonsListArr = [];

for (let i = 0; i < initialArr.length; i++) 
{
 buttonsListArr.Push(
   <Button style={{borderColor:{initialArr[i][0]}}} onPress={this.onPress.bind(this)}>{initialArr[i][1]}</Button>
 );
}

...

render() {
  return (
    <View style={...}>
     {buttonsListArr}
    </View>
)};

Je veux dire que ceci est juste une liste finie de composants, donc tous les composants comme ListView/ScrollView, etc. ne sont pas applicables dans ce cas particulier. Ceci est juste une question de syntaxe.

react-native
43
Stich

Vous utiliseriez habituellement la carte pour ce genre de chose.

buttonsListArr = initialArr.map(buttonInfo => (
  <Button ... key={buttonInfo[0]}>{buttonInfo[1]}</Button>
);

(la clé est un accessoire nécessaire chaque fois que vous effectuez un mappage dans React. La clé doit être un identifiant unique pour le composant généré)

D'un autre côté, j'utiliserais un objet au lieu d'un tableau. Je trouve que ça a l'air plus joli:

initialArr = [
  {
    id: 1,
    color: "blue",
    text: "text1"
  },
  {
    id: 2,
    color: "red",
    text: "text2"
  },
];

buttonsListArr = initialArr.map(buttonInfo => (
  <Button ... key={buttonInfo.id}>{buttonInfo.text}</Button>
);
37
nbkhope
render() {
  return (
    <View style={...}>
       {initialArr.map((prop, key) => {
         return (
           <Button style={{borderColor: prop[0]}}  key={key}>{prop[1]}</Button>
         );
      })}
     </View>
  )
}

devrait faire l'affaire

30
Damathryx

Pour le tableau initial, mieux vaut utiliser objet au lieu de tableau, car vous ne vous soucierez donc pas des index et vous verrez beaucoup plus clairement ce qui est quoi:

const initialArr = [{
    color: "blue",
    text: "text1"
}, {
    color: "red",
    text: "text2"
}];

Pour le mappage réel, utilisez JS Array map au lieu de for for - la boucle for doit être utilisée dans les cas où aucun tableau n'est défini, comme pour afficher quelque chose un certain nombre de fois:

onPress = () => {
    ...
};

renderButtons() {
    return initialArr.map((item) => {
        return (
            <Button 
                style={{ borderColor: item.color }}
                onPress={this.onPress}
            >
                {item.text}
            </Button>
        );
    });
}

...

render() {
    return (
        <View style={...}>
            {
                this.renderButtons()
            }
        </View>
    )
}

J'ai déplacé le mappage pour séparer les fonctions en dehors de la méthode de rendu pour un code plus lisible. Il existe de nombreuses autres manières de parcourir la liste des éléments dans reag native, et la manière dont vous allez utiliser dépend de ce que vous devez faire. La plupart de ces méthodes sont décrites dans cet article sur les boucles React JSX , et bien qu'il utilise des exemples React, vous pouvez tout utiliser dans React Natif. S'il vous plaît vérifier si vous êtes intéressé par ce sujet!

En outre, pas sur le sujet de la mise en boucle, mais comme vous utilisez déjà la syntaxe de tableau pour définir la fonction onPress, il n'est pas nécessaire de la lier à nouveau. Ceci, encore une fois, ne s'applique que si la fonction est définie à l'aide de cette syntaxe dans le composant, car la syntaxe de flèche lie automatiquement la fonction.

12
Nesha Zoric