[英]React conditional render based on state
我只是想知道最有效/最优雅的方法是什么?
我有一个组件,它将根据百分比设置颜色。 目前,该功能不起作用。
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;
如果我们谈论更“优雅”的解决方案,我会建议使用颜色配置这样的东西,因为它更“可维护”:
// 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;
不需要颜色的状态。 使用一种方法来检索颜色。
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>
);
};
创建一个效果,将带有progress
的color
设置为依赖项:
useEffect(() => {
setColor(progress >= 35 ? '#E75143' : '#13D1C5')
}, [progress])
任何时候progress
状态发生变化都会触发效果,设置color
。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.