如何在React中结合数据API渲染颜色选项并匹配对应色值

问题描述 #

我在React中结合数据API渲染产品颜色选项，API返回的产品数据和颜色选项如下（注意颜色值末尾带有空格）：

[
  {
    "id": 1,
    "price": 50990000,
    "image": "https://i.ibb.co/9W0kQyN/i-Pad-Pro-11-in-Wi-Fi-Space-Gray.png",
    "ram": "2048 GB",
    "color": "Space Gray "
  },
  {
    "id": 2,
    "price": 22450000,
    "image": "https://i.ibb.co/G7DnrH6/i-Pad-Pro-11-in-Wi-Fi-Silver.png",
    "ram": "128 GB",
    "color": "Silver "
  }
]

"options": [
  {
    "key": "color",
    "value": [
      "Space Gray ",
      "Silver "
    ]
  }
]

现有React代码尝试实现点击颜色选项切换对应产品内容，但需要解决两个问题：

• 将"Space Gray "显示为#333，"Silver "显示为#999
• 匹配当前选中颜色的选项自动添加active CSS类

解决方案 #

1. 创建颜色映射表

先定义一个映射对象，把API返回的颜色名称（包含末尾空格）对应到目标十六进制颜色值：

const COLOR_MAP = {
  "Space Gray ": "#333",
  "Silver ": "#999"
};

后续新增颜色时，直接扩展这个对象即可。

2. 修改颜色选项渲染代码

原代码里style={{backgroundColor: {value}}}是错误写法，需要从映射表中获取正确的背景色值，同时保留active类的匹配逻辑：

return (
  <div className={cx('option-color')}>
    {option.value.map((value, idx) => (
      <div
        className={cx('space', value === colorValue ? 'active' : '')}
        key={idx}
        onClick={() => findColor(value)}
      >
        <div 
          className={cx('radio-color')}
          style={{ backgroundColor: COLOR_MAP[value] }}
        ></div>
      </div>
    ))}
  </div>
);

• 移除了无效的value属性（div标签不支持该属性）
• 通过COLOR_MAP[value]获取对应背景色，解决颜色显示问题
• 保留value === colorValue ? 'active' : ''逻辑，确保选中的颜色自动添加active类

3. 优化空格兼容（可选）

如果API返回的颜色值空格可能不一致，可以统一去除空格避免匹配失败：

// 在useEffect设置colorValue时去除空格
setColorValue(checkColor?.trim());

// 更新映射表为无空格的键
const COLOR_MAP = {
  "Space Gray": "#333",
  "Silver": "#999"
};

// 渲染时对选项值做trim处理
{option.value.map((value, idx) => {
  const trimmedValue = value.trim();
  return (
    <div
      className={cx('space', trimmedValue === colorValue ? 'active' : '')}
      key={idx}
      onClick={() => findColor(trimmedValue)}
    >
      <div 
        className={cx('radio-color')}
        style={{ backgroundColor: COLOR_MAP[trimmedValue] }}
      ></div>
    </div>
  );
})}

4. 同步useLayoutEffect匹配逻辑

如果做了空格处理，需要在useLayoutEffect的匹配逻辑中同步处理产品颜色的空格：

var color = colorValue === undefined ? colorValue : `${colorValue}`;
return item.ram === ram && item.color?.trim() === color && item.storage === storage && item['screen-size'] === screenSize;

完整关键代码片段 #

const COLOR_MAP = {
  "Space Gray ": "#333",
  "Silver ": "#999"
};

// ... 其余原有代码保持不变 ...

const findColor = (color) => {
  setColorValue(color);
};

return (
  <div className={cx('option-color')}>
    {option.value.map((value, idx) => (
      <div
        className={cx('space', value === colorValue ? 'active' : '')}
        key={idx}
        onClick={() => findColor(value)}
      >
        <div 
          className={cx('radio-color')}
          style={{ backgroundColor: COLOR_MAP[value] }}
        ></div>
      </div>
    ))}
  </div>
);

内容的提问来源于stack exchange，提问作者Minh Quang