替代颜色如何通过每 4 个元素通过 Array.map 函数重复相同的组件模式？

Posted 2023-02-16

【中文标题】替代颜色如何通过每 4 个元素通过 Array.map 函数重复相同的组件模式？

【英文标题】：How would an alternate color pass every 4 elements to repeat the same component pattern with Array.map function?

【发布时间】：2022-01-18 19:10:12

【问题描述】：

我正在尝试向反应应用程序中的子组件发送一种替代颜色作为属性，但我不确定该怎么做。每个CardSimpleRow 组件的颜色必须以4 种不同的颜色交替，一旦出现第4 种颜色，它就会返回到颜色的开头，比如说。我想使用 map，因为我的矩阵是动态的，并且编写矩阵的每一行来渲染似乎是不必要的。

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

【参考方案1】：

如果我猜对了，你需要这样的东西：

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

【讨论】：

你太棒了，非常感谢兄弟！