根据 id 相等 指定相应颜色

index

import React from 'react'
import styles from './style.less'
const colorList = [
    {
        id: 1,
        color: '#41A9CC',
    },
    {
        id: 2,
        color: '#236FCC',
    },
    {
        id: 3,
        color: '#5858CC',
    },
    {
        id: 4,
        color: '#68CC77',
    },
    {
        id: 5,
        color: '#C2CC68',
    },
    {
        id: 6,
        color: '#CC8668',
    },
    {
        id: 7,
        color: 'pink',
    },
];
const data = [
    {
        name: '羽神',
        id: 1,
    },
    {
        name: '少主',
        id: 2,
    },
    {
        name: '大鼎',
        id: 3,
    },
    {
        name: '赵老威',
        id: 4,
    },
    {
        name: '郭帅',
        id: 5,
    },
    {
        name: '那个街口 我丢失了你',
        id: 6,
    },
    {
        name: '铜锣湾扛把子',
        id: 7,
    },

]

const index = () =>
{
    return (
        <div className={styles.container}>
            {data.map((data, index) =>
            {
                let color = null

                // for (const key in colorList)
                // {
                //     if (colorList[key].id === data.id)
                //     {
                //         color = colorList[key].color
                //     }
                // }
                for (const iterator of colorList)
                {
                    if (iterator.id === data.id)
                    {
                        color = iterator.color
                    }
                }

                return (
                    <div style={{ background: color }} className={styles.core}>{data.name}</div>
                )
            })}
        </div>
    )
}

export default index

CSS

.container {
  background: linear-gradient(#243949, #517fa4);
  display: flex;
  justify-content: center;
  align-items: center;

  .core {
    margin: 20px;
    width: 200px;
    height: 200px;
  }
}