0
votes

Comment faire une boucle à l'intérieur de l'instruction de retour en javascript

En react native en jsx, je veux qu'une fonction renvoie une boucle comme celle-ci, je fais comme ça mais mon code dit inaccessible dans ce cas.

javascript reactjs react-native jsx

3 commentaires

Essayez-vous d'afficher Hello World 5x?

@bertdida oui je veux afficher 5 fois

consultez cette réponse -> stackoverflow.com/questions/11714503 / retourne-arrête-une-boucle

3 Réponses :

0
votes

utilisez la carte au lieu de la boucle.

Array.from({ length: 5 }).map((v) => <Text key={v}>{v}</Text>)

0 commentaires

2
votes

Vous ne pouvez rendre qu'un élément React.

Voici un exemple simple, bien que les boucles for soient à peine utilisées.

let content = [];
for (let i = 0; i < 5; i++) {
  content.push(<h1>Hello World using for loop</h1>);
}

const App = () => {
  return (
    <div>
      {content}
      {[...Array(5).keys()].map((key) => (
        <h1 key={key}>Hello World using map</h1>
      ))}
    </div>
  );
};

1 commentaires

J'ai besoin d'une boucle for car je dois utiliser la propriété for-in dans ma condition également comme for (var i in array) {}

0
votes

De nombreuses solutions:

Écrire 5x Hello world

// Fonction

<View>
    {list.map((text, index) => <Text key={index}>{text}</Text>)}
</View>

// Rendu

const list = [
    "Hello World",
    "Ad adipisicing ea ut in officia.",
    "Consectetur ipsum commodo reprehenderit sit est aliquip commodo ad qui duis et exercitation.",
    "Est sint esse veniam laborum cillum ullamco aliquip aute eiusmod cupidatat."
]

Mappage d'un tableau de valeurs

// Tableau

<View>
    {this.getList()}
</View>

// Rendu

getList(){
    let texts = []
    for (let index = 0; index < 5; index++) {
        texts.push(<Text>Hello World</Text>)
    }
    return texts
}

0 commentaires