之前有写过调取接口获取到菜单后,指定五个背景颜色循环展示,现在来总结一下。
import React from "react"
export default function index() {
const arr = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
const arrObj = [
{ name: "LanM", color: "blue" },
{ name: "Strawberry", color: "red" },
{ name: "BlackBerry", color: "black" },
]
let bgc = []
let name = []
let key = 0
for (let i = 0; i < arr.length; i++) {
if (key == 3) {
key = 0
}
bgc[i] = arrObj[key].color
name[i] = arrObj[key].name
key++
console.log(bgc[i])
}
return (
<div>
{arr.map((item: any) => {
console.log(item)
return (
<div key={item + ""} style={{ backgroundColor: bgc[item], width: "100px", height: "60px", color: "#fff" }}>
{name[item]}
</div>
)
})}
</div>
)
}
说实话,写完这个有一种顿悟的感觉,感觉以前的JS白学了
效果:
![](https://i-blog.csdnimg.cn/blog_migrate/430494c73005e5a4733db42cd767a3ad.png)