Reactjs 如何在 React x 中返回组件

发布于08月14日

在这个for循环中，我想多次返回<Component/>: var i = 0;i < products.length;i++

一百零二

当我try 在for循环中返回它时，它只返回一个组件.

我的代码是 here.

数组Products被定义为here.

谢谢

推荐答案

您应该将5个Product元素添加到列表中，而不是只在for循环中返回一个元素.如果在for循环中使用RETURN关键字，它将中断循环并在之后停止执行.

例如.

let result = []

For(let i = 0; i < products.length; i++) {
  result.push((
    <div className="col-md-3">
      <div className="card">
        <Link to={products[i].link}><img className="card-img-top" src={products[i].image} alt="Card cap" /></Link>
        <div className="card-body">
         <h5 className="card-title"> 
           {products[i].name}
         </h5>
         <p className="card-text"> 
          {products[i].description}
         </p>
       </div>
     </div>
   </div >
     ));
}

return result

然后，您可以在呈现函数中结合使用生成的数组和map函数来显示所有元素.

(我宁愿将所有产品放在一个普通的JS数组中，然后在渲染函数中映射到该数组上.)

如果你想要一些额外的阅读material ，请查看https://reactjs.org/docs/lists-and-keys.html