如何使用react和typescript重构三元运算符代码

Question

我获取基于变量books和pens的颜色。如果books或pens的值为0，则应用红色，值为1，则应用蓝色，否则应用绿色。

从下面的代码来看，代码是多余的，这意味着我正在根据值应用相同的颜色。我该如何重构它，以便进一步简化它。

下面是代码，

const booksCountColor =
books === 0
? red
: books === 1
? blue
: green;
const pensCountColor =
pens === 0
? red
: pens === 1
? blue
: green;

有人能帮我做这个吗。谢谢

Answer 1

嵌套条件对于可读性来说非常糟糕。我会制作一个数组，并用green:替换

const colors = [red, blue];
const booksCountColor = colors[books] || green;
const pensCountColor = colors[pens] || green;

你可以把它放进一个功能中，让它变得更干燥

const colors = [red, blue];
const getColor = index => colors[index] || green;
const booksCountColor = getColor(books);
const pensCountColor = getColor(pens);

Answer 2

嵌套三元语句/if-else语句的问题是它可能相当混乱。您可以考虑通过使用早期返回模式来重写它，以保持干净。

const booksCountColor = () => {
if (books === 0) {
return red;
}
if (books === 1) {
return blue;
}
return green;
};
const pensCountColor = () => {
if (pens === 0) {
return red;
}
if (pens === 1) {
return blue;
}
return green;
};