我目前正在通过render方法返回每个对象的列表元素的产品数组,我想为可用的产品数量创建一个html选择标签。只有这样,我才能想到这样做是通过为每个数量循环一个选项,但在map函数中使用它时似乎会引发语法错误。如何循环使用React中的地图功能?
我似乎无法找到任何关于此问题的问题,map函数内部的整个循环已经返回jsx。
render() {
const products = this.props.products.map((product, id) =>
<li key={id} className='products-list-container' >
<div className='product-inner-div-wrapper'>
<div className='product-title-container'>
<p>{product.name}</p>
</div>
<div className='product-price-container'>
<p>{product.price.formatted_with_code}</p>
</div>
// THIS IS WHERE I TRY TO LOOP AND CREATE AN OPTION
// FOR EVERY QUANTITY
<select>
{
for (var i = 0; i < products.quantity; i++) {
return <option value={i}>{i}</option>
}
}
</select>
<div className='product-add-item-container'>
{ product.is.sold_out ? <p>SOLD OUT</p> :
<p onClick={() => this.addItem(product.id)}>add to cart</p>
}
</div>
<div className='products-image-container'>
<img src={product.media.source} />
</div>
</div>
</li>
);
return(
<div className='products-list-container'>
<ul className='products-list-ul'>
{products}
</ul>
</div>
)
}
[React JSX内部循环可能重复](https://stackoverflow.com/questions/22876978/loop-inside-react-jsx) –
你可以用products.quantity做另一个映射,并使用var内部的var地图。 –
@MayankShukla看不到?我的代码在返回之外显示一个map函数,它已经返回一个jsx元素。那么我如何循环内部的map函数中的jsx元素?大括号似乎并不被在此方案中 –