如何从数组中提取100级色值并在循环外的单独区域渲染

修改后可直接运行的代码 #

const colorPalette = {
  Dark10: "#FEF9E8",
  Dark20: "#FDF4DE",
  Dark30: "#FCEFCC",
  Dark40: "#F7E0A2",
  Dark50: "#F0CC72",
  Dark60: "#D5B363",
  Dark70: "#C7A55E",
  Dark80: "#B39553",
  Dark90: "#9D8240",
  Dark100: "#89723E",
  Dark110: "#7C6737",
  Dark120: "#715E32",
  Dark130: "#66552E",
  Dark140: "#5B4A28"
};

const ColorSwatches = ({ colors, shade }) => {
  // 过滤对应色系的所有色值
  const filteredEntries = Object.entries(colors).filter(([key]) => key.includes(shade));
  // 单独提取100级色值，用后缀匹配比索引判断更稳定
  const oneHundredColor = filteredEntries.find(([key]) => key.endsWith('100'));
  // 过滤出除100级外的其他色值用于普通色块渲染
  const normalColors = filteredEntries.filter(([key]) => !key.endsWith('100'));

  return (
    <div className="wrapper">
      {/* 100级专属展示块 */}
      <div className="bigNumber">
        <h1>{oneHundredColor?.[0]}</h1>
        <p>{oneHundredColor?.[1]}</p>
      </div>
      {/* 其他等级色值渲染 */}
      {normalColors.map((color, i) => (
        <div key={i} style={{ backgroundColor: color[1] }}>
          <h2>{color[0]}</h2>
          <p>HEX {color[1]}</p>
        </div>
      ))}
    </div>
  );
};

核心修改说明 #

• 调整了取值时序：在渲染逻辑执行前就完成100级色值的提取，解决原代码「先渲染专属块再赋值」导致的取值为空问题
• 替换索引判断逻辑：用endsWith('100')匹配色值名后缀，适配色值列表顺序变化、数量增减的场景，稳定性更高
• 修复JSX语法问题：将原代码的class改为React规范的className，避免控制台告警
• 增加可选链?.做容错处理，避免未找到100级色值时出现渲染报错

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