Comment faire une boucle dans React JSX

Comment faire une boucle dans un composant React JSX


Si vous avez un ensemble d'éléments sur lesquels vous devez boucler pour générer un partiel JSX, vous pouvez créer une boucle, puis ajouter JSX à un tableau:

const elements = [] //..some array

const items = []

for (const [index, value] of elements.entries()) { items.push(<Element key={index} />) }

Désormais, lors du rendu du JSX, vous pouvez intégrer leitemstableau en l'enveloppant entre accolades:

render() {
  const elements = ['one', 'two', 'three'];

const items = []

for (const [index, value] of elements.entries()) { items.push(<li key={index}>{value}</li>) }

return ( <div> {items} </div> ) }

Vous pouvez faire la même chose directement dans le JSX, en utilisantmapau lieu d'une boucle for-of:

render: function() {
  const elements = ['one', 'two', 'three'];
  return (
    <ul>
      {elements.map((value, index) => {
        return <li key={index}>{value}</li>
      })}
    </ul>
  )
}

Téléchargez mon gratuitManuel React


Plus de tutoriels de réaction: