Javascript 进口颜色的分类

我有一个文件

colors.js

，它导出了许多颜色、一些真正的十六进制代码颜色和一些语义代理颜色：

// True colors
export const BLACK = '#000000';
export const WHITE = "#FFFFFF";

// Semantic Proxy Colors
export const HOME_PAGE = WHITE;
export const DARK_STYLE = BLACK;

然后，我将所有导出的颜色导入到一个组件中，并映射到它们上，以生成样式指南的调色板。我想有两个部分，一个是真颜色，另一个是语义颜色

目前（见下面的代码）当我映射到它们时，我得到了真颜色和语义颜色。我想要一种方法来查看真彩色并将其存储在数据结构中，然后查看每个语义颜色并检查值是否对应于真彩色的键

import * as Color from './colors';
...
render() {
    let colorsMap = Object.keys(Color);
    return (
        <div>
            <h2>Colour Palette</h2>
            <div>
                {colorsMap.map((color) => <Swatch key={color} name={color} />)}
            </div>
        </div>
    )
}

从“/colors”导入*作为颜色；
...
render（）{
让colorsMap=Object.keys（颜色）；
返回(
调色板
{colorsMap.map（（color）=>）}
)
}

---

Swatch是一个轻量级组件，它使用从

颜色

道具接收到的背景颜色来显示div。

使用正则表达式来区分颜色？导出两个对象：一个是真颜色，另一个是语义颜色。1。导出两个/一个对象。2.使用命名来区分十六进制颜色

CLR_BLACK

。使用正则表达式来区分颜色？导出两个对象：一个是真颜色，另一个是语义颜色。1。导出两个/一个对象。2.使用命名来区分十六进制颜色

CLR\u BLACK

。