我有一個物件陣列，例如：
{"code": 123, "description": "Item 1", "group": 2},
{"code": 211, "description": "Item 2", "group": 2},
{"code": 234, "description": "Item 3", "group": 3},
{"code": 255, "description": "Item 4", "group": 4},
{"code": 311, "description": "Item 5", "group": 4},
我有一個平面串列
<FlatList
data={products}
...
renderItem={({item, i }) => {
return <SingleItem key={item.code} } product={item} />
}}
/>
我渲染了串列，FlatList并且我想將樣式應用于<SingleIem>如果 2 個相鄰專案具有不同的組。
例如
1) Items 1 & 2 have the same group -> no style will be applied.
2) Items 2 & 3 have different groups -> style will be applied to Item 3
3) Items 3 & 4 have different groups -> style will be applied to Item 4
等等。
我怎樣才能做到這一點？
uj5u.com熱心網友回復：
如果您手頭已經有一個物件陣列和一個索引，這意味著您可以將當前索引與最后一個索引進行比較，并檢查兩者的組屬性是否相同。放置在 renderItem 函式內并相應地分配類
renderItem={ (item, i) => {
const isSameCategrory = arr[i]?.group === arr[i-1]?.group;
// rest of code goes here
}
}
uj5u.com熱心網友回復：
您可以使用引數比較group屬性i
const arr = [
{"code": 123, "description": "Item 1", "group": 2},
{"code": 211, "description": "Item 2", "group": 2},
{"code": 234, "description": "Item 3", "group": 3},
{"code": 255, "description": "Item 4", "group": 4},
{"code": 311, "description": "Item 5", "group": 4}
]
renderItem={({item, i }) => {
const isDifferentGroup = arrOfObjects[i]?.group !== arrOfObjects[i-1]?.group;
return (
<div className={isDifferentGroup ? "class-name" : undefined}>
<SingleItem key={item.code} } product={item} />
</div>
)
}}
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/486421.html
標籤：javascript 反应 反应式 反应本机平面列表