我正在嘗試將我的子組件在反應應用程式中發送另一種顏色作為屬性,但我不確定如何去做。每個彩色CardSimpleRow的4種不同顏色,一旦第四顏色組件必須替代是存在的,它回傳到顏色的開始,讓我們說。我想用地圖,因為我的基質是動態的,寫矩陣呈現的每一行似乎沒有必要。
export const FollowScreen = () => {
const alternatingColor = [ ["#d72226", "#a8232a"], ["#123", "#a33a"], ["#f3f3f3", "#a8232a"], ["#dd26", "#a8232a"] ]
return (
<>
{
data.map((elements, index) => {
return <CardSimpleRow
color={index % 4 ? alternatingColor[1] : alternatingColor[0]}
elements={elements}
/>
})
}
</>
)
這是一個漸變,所以我需要發送第一個陣列,然后是第二個陣列,然后是第三個,然后是第四個,然后回傳到第一個陣列>
例如,如果有8 CardSimpleRow,我需要4卡從0到4,然后其他四個陣列與陣列0-4再次
uj5u.com熱心網友回復:
如果我做對了,你需要這樣的東西:
alternatingColor[0]
alternatingColor[1]
alternatingColor[2]
alternatingColor[4]
alternatingColor[0]
alternatingColor[1]
...
為了得到你只需要改變一行:
...
color={alternatingColor[index % 4]}
...
這將alternatingColor通過基于索引取整數余數來訪問正確的元素。
索引 0 => 0 / 4 的余數 == 0
索引 1 => 1 / 4 的余數 == 1
...
索引 5 => 5 / 4 的余數 == 1
轉載請註明出處,本文鏈接:https://www.uj5u.com/yidong/381645.html
