javascript - 如何多次渲染一个元素
问题描述
我有一个我必须渲染的项目列表(js 对象)。该列表如下所示:https ://imgur.com/a/lEgfMHd
category: {id: 1, name: "Mac"}
created_at: "2021-08-13T21:07:03.619726Z"
id: 4
name: "iMac 24”"
preview_image: "/media/images/f1cb8efe-13e1-482e-97ca-30ffdf88e3c0.png"
price: 1699
sales: 0
updated_at: "2021-08-13T21:10:07.247422Z"
我需要渲染所有这些元素,但我不知道该怎么做。现在,如果我只知道他的索引,我可以渲染一个元素
render() {
const {items} = this.state
const countItems = Object.keys(items).length
const secEl = items[1]
let url = ''
if(secEl && secEl.preview_image) {
url = '*******'
url = url + secEl.preview_image
}
return(
<div className='store-items'>
<div className='store-item'>
<img className='store-item__img' src={url}></img>
<h3 className='store-item__title'>{secEl && secEl.name}</h3>
<h3 className='store-item_price'>${secEl && secEl.price}</h3>
</div>
</div>
)
}
我知道如何获取列表中的项目数,但我不知道如何使用不同的名称、价格和 img 渲染多次相同的元素。
请帮助我,我是 React 的新手
解决方案
创建一个 JSX 元素数组。
items.map((item, index) => {
let url = url = secEl.preview_image
return (
<div id={index} className='store-item'>
<img className='store-item__img' src={url}></img>
<h3 className='store-item__title'>{item.name}</h3>
<h3 className='store-item_price'>${item.price}</h3>
</div>
)
}
return(
<div className='store-items'>
{ items }
</div>
)
推荐阅读
- javascript - Vue-boostrap 卡不显示登机
- css - 如何将导航链接向下移动页面
- .net - 在 .net 框架中更新到 VS 16.5.0 后 HttpContext.Current 为空
- javascript - 未捕获的 TypeError:this.timestamp 不是函数
- javascript - 使用 fetch API 从数组中获取数据的问题
- python - How can I extend file paths for a dictionary
- gitlab - How to Setup GitLab Environment Variables in a safe way?
- node.js - 如何在不使用 NPM 存储库的情况下安装 lerna 包
- c# - EF Core 3.1 查询有时超快但有时很慢
- javascript - How to create a Howerjs progressbar?