我正在嘗試使用 reactjs JSX 為陣列中的每個元素創建一個 div 元素。我不確定如何真正做到這一點，但我嘗試這樣做：
{results.forEach(element => {
<div className={classes.SearchResults}>
{results[element]}
</div>
})}
這沒有用，但我相當有信心它是沿著這些路線的。我沒有收到任何錯誤結果是我在別處定義的一個陣列元素，它完全正常作業。唯一的問題是為結果陣列中的每個元素顯示一個新的 div 元素。如果您需要更多代碼，我很樂意為您提供，但我認為這應該足夠了。
uj5u.com熱心網友回復：
關閉。
首先，您想要.map()，而不是.forEach()。后者只是迭代但不回傳任何內容，而前者回傳一個新陣列（與原始陣列大小相同）“映射”到新元素結構（在本例中為 JSX 元素）。
除此之外……這里使用大括號{}創建了一個函式體，在這種情況下它由一個 JSX 元素組成，但不回傳任何內容：
{
<div className={classes.SearchResults}>
{results[element]}
</div>
}
您可以顯式回傳元素：
{
return (<div className={classes.SearchResults}>
{results[element]}
</div>);
}
或者通過在箭頭函式()周圍使用括號來使用箭頭函式的隱式回傳，使整個函式只是一個陳述句（而不是顯式函式體）：
(
<div className={classes.SearchResults}>
{results[element]}
</div>
)
另外......這里的使用results[element]看起來是錯誤的。第一個回呼引數.map()不是index，而是元素本身。我懷疑你想要這個：
(
<div className={classes.SearchResults}>
{element}
</div>
)
最后要注意的是，在 React 中，如果您遍歷這樣的陣列以生成 JSX，但不key向 JSX 元素提供屬性，您將看到警告。如果element物件有一個識別符號，比如一個id屬性，你可以使用它：
(
<div key={element.id} className={classes.SearchResults}>
{element}
</div>
)
但是做不到這一點，你總是可以依靠的第二個引數的.map()回呼，這是剛剛陣列元素的索引：
{results.map((element, i) => (
<div key={i} className={classes.SearchResults}>
{element}
</div>
))}
uj5u.com熱心網友回復：
forEach 只運行你的回呼忽略回傳值
map 用于為每次迭代轉換并回傳一個新值，因此您可以使用以下代碼：
{results.map((element, index) => {
return (
<div className={classes.SearchResults} key={index}>
{results[element]}
</div>
)
})}
uj5u.com熱心網友回復：
你很接近，但你在這里使用了錯誤的陣列方法。Array.map()回傳一個新陣列，您可以使用它回傳一個divs要為陣列中的每個專案呈現的results陣列。
有關更多詳細資訊，請查看此處：https : //reactjs.org/docs/lists-and-keys.html
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/330766.html
標籤：javascript html 数组 反应
上一篇：將div移動到導航欄的右側