我想使用帶有復選框的地圖功能。我已經撰寫了這段代碼，但它給出了錯誤。怎么做
<div>
<form>
{
data.map((x)=>{
<input type="checkbox" />{x.name}
})
}
</form>
</div>
uj5u.com熱心網友回復：
你需要return從地圖回呼
<div>
<form>
{
data.map((x) => {
return <input type="checkbox" />{x.name}
})
}
</form>
</div>
并且您還可以label在和文本周圍添加一個input，以便用戶還可以單擊文本以突出顯示相關的復選框
<div>
<form>
{
data.map((x) => {
return <label><input type="checkbox" />{x.name}</label>
})
}
</form>
</div>
uj5u.com熱心網友回復：
在 JavaScript 中使用箭頭函式時，可以return顯式地或隱式地使用。
明確地
<div>
<form>
{
data.map(x => {return <input type="checkbox" />{x.name}})
}
</form>
</div>
隱式
<div>
<form>
{
data.map(x => <input type="checkbox" />{x.name})
}
</form>
</div>
執行以下操作將導致data.map(x => {<input type="checkbox" />{x.name}})成為陣列undefined而不是輸入陣列。
<div>
<form>
{
data.map(x => {<input type="checkbox" />{x.name}})
}
</form>
</div>
uj5u.com熱心網友回復：
你應該用括號改變花括號
<div>
<form>
{
data.map((x)=>(
<input type="checkbox" />{x.name}
)
}
</form>
</div>
uj5u.com熱心網友回復：
現在您已經獲得了復選框語法的幫助，我建議在使用 map 時使用鍵。
如果您沒有每個專案的唯一值，請在回呼函式中添加索引引數。
import React from "react";
import "./style.css";
export default function App() {
const list = [1,2,3,4,5];
return (
<div>
<ol>
{list.map((item, index) =>
<li key={index}> {item} </li>
)}
</ol>
</div>
);
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/459694.html