我在反應組件中有這個 Object.map 陳述句。
{
instagramItems.map((item, index) => (
<div className="row" Key={index}>
<div onClick={() => handleClick(item, index)} className="image-block col-sm-4" style={{
backgroundImage: "url(" item.media_url ")",
backgroundPosition: 'center ',
backgroundSize: 'cover',
backgroundRepeat: 'no-repeat'
}}></div>
我想更改 div 上的 col-sm-X 類，以便輸出重復此模式。
col-sm-4
col-sm-8
col-sm-4
col-sm-4
col-sm-4
col-sm-8
col-sm-4
我猜我需要使用索引來計算我需要將類設定為什么。
uj5u.com熱心網友回復：
是的。如果它背后有邏輯，即“第 2 項，倒數第二個”是 8，那么您可以將其編碼。
`col-sm-${index === 1 || index === myArray.length-2 ? 8: 4}`
或者，如果它們不遵循任何模式并拉出回圈索引，您可以擁有一個單獨的類陣列。
const cols = [4, 8, 4, 4, 4, 8]
const myArray.map((x, i) => <div className={cols[i]}></div>)
你如何去做更多的是一種開發人員體驗。什么模式最容易理解/維護/等
uj5u.com熱心網友回復：
在@Yuji 'Tomita' Tomita 的回答之后，為了清楚起見
有效的源代碼如下所示：
{instagramItems.map((item, index) => (
<div Key={index} onClick={() => handleClick(item, index)} className={"image-block col-sm-" (index === 1 || index === instagramItems.length - 2 ? 8 : 4) } style={{
backgroundImage: "url(" item.media_url ")",
backgroundPosition: 'center ',
backgroundSize: 'cover',
backgroundRepeat: 'no-repeat'
}}></div>
))}
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/490146.html
標籤：javascript 反应 反应引导
下一篇：OracleCASE陳述句