如何在React.js中将API返回的RGB颜色数据转为颜色样本展示？

我现在用这段代码展示颜色数据：

<p className="scheduled_p">{schedule.mode.rgb_color}</p>

目前显示的是数字形式的RGB数组（比如[255,255,255]），但我想把它渲染成移动端应用里那种纯色块（不是颜色选择器），让Web端和移动端设计保持一致。请问在React里能实现吗？该怎么做？

JSON数据结构：

"mode": {
    "rgb_color": [
        255,
        255,
        255
    ]
}

当前React渲染代码：

{schedules.map(schedule => (
  <div className="each_scheduled" key={schedule.id}>
    <div>
      <p className="scheduled_p">Color</p>
      <p className="scheduled_p">{schedule.mode.rgb_color}</p>
    </div>
  </div>
))}

完全可以实现，核心是利用RGB数组生成CSS颜色值，再通过样式给元素设置背景色，调整宽高做成色块。

方法1：内联样式直接生成颜色块 #

把显示数字的<p>换成专门的色块元素，用内联样式设置backgroundColor为rgb(r,g,b)格式，同时定义基础样式：

修改后的React代码：

{schedules.map(schedule => {
  const [r, g, b] = schedule.mode.rgb_color;
  return (
    <div className="each_scheduled" key={schedule.id}>
      <div>
        <p className="scheduled_p">Color</p>
        {/* 颜色块元素 */}
        <div 
          className="color-block"
          style={{ backgroundColor: `rgb(${r}, ${g}, ${b})` }}
        />
      </div>
    </div>
  )
})}

对应的CSS样式（可根据移动端设计调整尺寸、圆角等）：

.color-block {
  width: 40px;
  height: 40px;
  border-radius: 8px; /* 按需设置圆角 */
  border: 1px solid #ddd; /* 可选边框增强视觉 */
}

方法2：结合CSS变量（更灵活） #

如果需要统一管理样式，用CSS变量传递RGB值：

React代码：

{schedules.map(schedule => {
  const [r, g, b] = schedule.mode.rgb_color;
  return (
    <div className="each_scheduled" key={schedule.id}>
      <div>
        <p className="scheduled_p">Color</p>
        <div 
          className="color-block"
          style={{ 
            '--color-r': r,
            '--color-g': g,
            '--color-b': b
          }}
        />
      </div>
    </div>
  )
})}

CSS样式：

.color-block {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  background-color: rgb(var(--color-r), var(--color-g), var(--color-b));
}

注意事项 #

• 确保RGB数组的三个值都是0-255范围内的有效数字，避免渲染异常；
• 若需兼容旧浏览器（如IE），优先用内联样式方案，CSS变量不支持IE；
• 可根据设计需求调整色块的尺寸、阴影、圆角等属性，完全匹配移动端效果。

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