[英]Trying to add loop in function of React JS getting JSX expressions must have one parent element
我嘗試像其他答案中提到的那樣添加<> </>
但那確實有效。 它是一個帶有返回語句的簡單 function 組件:
export default function Merchant4SubscriptionForm(props) {
//some code
return (
//some rendering
<div className="card active rounded bg-primary p-5 my-3 mr-3 text-center">
{produts.map(product => (
<h4>{product.id}</h4>
<h1 className="price">{product.price}</h1>
<ul className="no-disk">
<li>{product.month_count} month count</li>
<li>{product.time} Package</li>
<li>{product.title}</li>
</ul>
))} //This area shows red however, please check console attached.
<img className="img-responsive mt-5" src="2219 [Converted]-01.png" />
</div>
);
}
}
在循環開始時添加簡單的 div 就可以避免錯誤。 雖然不明白為什么。
{products.map(product => (
<div>
<h4>{product.id}</h4>
<h1 className="price">{product.price}</h1>
<ul className="no-disk">
<li>{product.month_count} month count</li>
<li>{product.time} Package</li>
<li>{product.title}</li>
</ul>
</div>
))}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.