Rendu d'un tableau d'objets dans React
Le rendu des listes dans React est essentiel pour afficher des données dynamiques. Ce guide montre comment restituer efficacement un tableau d'objets dans React à l'aide de la fonction map.
Approche :
Considérez le composant React suivant :
<code class="javascript">class First extends React.Component { render() { const data = [{ name: "test1" }, { name: "test2" }]; const listItems = data.map((d) => <li key={d.name}>{d.name}</li>); return ( <div> Hello </div> ); } }</code>
Il existe deux approches principales pour restituer le tableau d'objets :
Première approche :
Attribuez le tableau mappé à une variable et renvoyez-le dans la fonction de rendu :
<code class="javascript">render() { const data =[{"name":"test1"},{"name":"test2"}]; const listItems = data.map((d) => <li key={d.name}>{d.name}</li>); return ( <div> {listItems } </div> ); }</code>
Deuxième approche :
Intégrez directement la fonction map dans l'instruction return :
<code class="javascript">render() { const data =[{"name":"test1"},{"name":"test2"}]; return ( <div> {data.map(function(d, idx){ return (<li key={idx}>{d.name}</li>) })} </div> ); }</code>
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!