Javascript 基于状态的反应条件渲染

我只是想知道做这件事最有效/最优雅的方式是什么

我有一个组件，它将根据百分比设置颜色。目前，该功能不起作用

const App = () => {
  const [progress, setProgress] = useState(51);
  const [color, setColor] = useState("");

  const updateColor = color => {
    if (progress >= 35) {
      setColor("#E75143");
    } else if (progress < 36 && progress > 60) {
      setColor("#FFBF00");
    } else if (progress < 61) {
      setColor("#13D1C5");
    }
  };

  return (
    <div>
      <Progress
        /* strokeColor={updateColor(color)} */ strokeColor={color}
        percent={progress}
      />
    </div>
  );
};

export default App;

const-App=（）=>{
const[progress，setProgress]=useState（51）；
const[color，setColor]=useState（“”）；
const updateColor=color=>{
如果（进度>=35）{
setColor（“E75143”）；
}否则如果（进度<36&&进度>60）{
setColor（“FFBF00”）；
}否则，如果（进度<61）{
设置颜色（“13D1C5”）；
}
};
返回(
);
};
导出默认应用程序；

---

创建一种效果，将

颜色

与

进度

设置为依赖项：

useEffect(() => {
  setColor(progress >= 35 ? '#E75143' : '#13D1C5')
}, [progress])

---

每当

进度

状态更改时，效果都会被激发，设置

颜色

不需要颜色的状态。使用方法检索颜色

const App = () => {
  const [progress, setProgress] = useState(59);

  const updateColor = () => {
    if (progress >= 35 && progress < 60) {
      return "#E75143"
    } else if (progress < 35 ) {
      return "#FFBF00"
    } else if (progress >= 60) {
      return "#13D1C5";
    }
  };

  return (
    <div>
      <Progress
        /* strokeColor={updateColor(color)} */ strokeColor={updateColor()}
        percent={progress}
      />
    </div>
  );
};

const-App=（）=>{
const[progress，setProgress]=useState（59）；
常量更新颜色=（）=>{
如果（进度>=35&&进度<60）{
返回“#E75143”
}否则，如果（进度<35）{
返回“#FFBF00”
}否则，如果（进度>=60）{
返回“#13D1C5”；
}
};
返回(
);
};

如果我们讨论的是更“优雅”的解决方案，我建议使用类似的颜色配置，因为它更“可维护”：

//此对象可以在所有应用程序中使用。
常量颜色={
备选案文1：{
颜色：“FFBF00”，
间隔：[0,34]
},
备选案文2：{
颜色：“#E75143”，
间隔：[35,60]
},
备选案文3：{
颜色：“#13D1C5”，
间隔：[60100]
}
};
const getOptionByProgress=progress=>{
返回Object.values（COLORS）.find（{interval}）=>{
常数[最小值，最大值]=间隔；
return min有没有一种更短的方法来编写if语句？你可以用switch语句@Freddy来完成。第二个if语句永远都不可能为true，所以我删除了它并简化了if语句。你可以像@Konstantin所说的那样使用
switch
，但这本身并不会使它变短。我不认为真的有更短的方法我建议编写一些utils函数，它将采用progress并返回颜色散列。
const getColorByProgress=progress=>if（progress>=35）{return“\E75143”}或者if（progress<36&&progress>60）{return”\FFBF00}否则，如果（progress<61）{return“#13D1C5”}
然后在组件中导入此函数，则代码将为：
useffect（（）=>getColorByProgress（progress），[progress]）
// This object can be used across all applications.
const COLORS = {
  OPTION1: {
    color: 'FFBF00',
    interval: [0, 34]
  },
  OPTION2: {
    color: '#E75143',
    interval: [35, 60]
  },
  OPTION3: {
    color: '#13D1C5',
    interval: [60, 100]
  }
};

const getOptionByProgress = progress => {
  return Object.values(COLORS).find(({ interval }) => {
    const [min, max] = interval;
    return min <= progress && progress <= max;
  });
};

const App = () => {
  const [progress, setProgress] = useState(51);
  return (
    <Progress
      strokeColor={getOptionByProgress(progress).color}
      percent={progress}
    />
  );
};

export default App;