這個問題在這里已經有了答案： 是否可以在反應渲染函式中回傳空？ (8 個回答) 10 小時前關閉。
我該如何實施？
我想通過計劃陣列進行映射，并為每個專案呈現一個串列。雖然這是有效的，但如果我們在標題上有 null 或 undefined，我們仍然有 4 個 Li 標簽渲染，其中第二個沒有任何內容。但是如果標題為空/未定義，我該如何實作這個物件被忽略并移動到下一個物件并呈現陣列的其余部分。
希望我的解釋清楚。
import React from "react";
const App = (props) => {
const plans = [
{
title: "Starter",
plan: "plan_0",
},
{ title: undefined,
plan: "plan_1A",
},
{
title: "Classic",
plan: "plan_2A",
},
{
title: "Premium",
plan: "plan_3A",
},
];
return (
<div>
<h1>Notes</h1>
<ul>
{plans.map((plan, i) =>
<li className="something" key={i}>
<span className="somethingels">{plan.title}</span>
</li>
)}
</ul>
</div>
);
};
export default App;
目前它的渲染是這樣的：
<li>Starter</li>
<li></li>
<li>Classic</li>
<li>Premium</li>
uj5u.com熱心網友回復：
只需添加一個條件陳述句就可以解決問題：
{plans.map((plan, i) =>
{ plan.title &&
<li className="something" key={i}>
<span className="somethingels">{plan.title}</span>
</li>
}
)}
uj5u.com熱心網友回復：
在呈現串列項之前檢查該計劃是否具有 title 屬性:)
<ul>
{plans.map(
(plan, i) =>
plan.title && (
<li className="something" key={i}>
<span className="somethingels">{plan.title}</span>
</li>
)
)}
</ul>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/330789.html
標籤：javascript 数组 反应
下一篇：條件渲染輸入重疊文本