javascript - 如何在React中将温度以摄氏度显示为RGB？

Question

如何根据摄氏温度创建背景颜色？假设我有一组温度值:[19°,29°,30°,32°]，我想将它们表示为RGB颜色，该怎么做？

我正在考虑设置一些默认颜色，并根据温度来呈现它们，如下所示:

const red = 'red';
const cyan = 'cyan';

if((temp < hottest ){ return red;}
if((temp > hottest ){ return cyan;}

但我不喜欢这种方法，因为我想要获得色调而不是纯色......

我找到了This解决方案，但我无法让它与摄氏度一起工作...

Answer 1

假设 0° 应该是蓝色(rgb(0, 0, 255))，100° 应该是红色(rgb(255, 0, 0))。

const maxTemp = 100;
const minTemp = 0;
const redVal = 255 / (maxTemp - minTemp) * (temp - minTemp);
const blueVal = 255 / (maxTemp - minTemp) * (maxTemp - temp);
...
  <div style={{ backgroundColor : `rgb(${redVal}, 0, ${blueVal})` }}