Как провести рефакторинг кода тернарного оператора с помощью React и TypeScript?

Question

Я получаю цвет на основе переменных книг и ручек. если значение для книг или ручек равно 0, применить красный цвет, значение равно 1, применить синий, иначе зеленый.

Из приведенного ниже кода код избыточен, что означает, что я применяю те же цвета в зависимости от значения. как я могу реорганизовать его так, чтобы его можно было еще упростить.

Ниже приведен код

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

Может ли кто-нибудь помочь мне с этим. спасибо.

Answer 1

Проблема с вложенными тернарными операторами / операторами 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;
};

Answer 2

Вложенные условные выражения ужасны для чтения. Вместо этого я бы сделал массив и чередовал его с green:

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

Вы могли бы немного сделать его DRY -er, поместив его в функцию

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