Два if в тернарном операторе react if else

Question

React. Опишу свою проблему на банальном примере. Допустим, есть переменная

let user = 'Ivan'

Могу ли я в jsx создать такой тернарный оператор проверки if else, который будет иметь два if и один else в своей конструкции?

Итак. Что я пытаюсь сделать примерно. Проверяю:

{user == 'ivan' ? 'Пользователя зовут Иван' user == 'Boris' ? 'Пользователя зовут Борис' : 'Не знаю такого пользователя'}

Но такая конструкция не работает. У меня ошибка в синтаксисе? Или подобная конструкция никоим образом не может принять в себя два выражения для положительного ответа?

Не хочу городить здоровенную конструкцию из if или кейсов, потому хочу реализовать это более лаконично и аккуратно.

Answer 1

Можно, конечно, сделать так

{
  user == 'ivan' ? 'Пользователя зовут Иван' :
    user == 'Boris' ? 'Пользователя зовут Борис' : 'Не знаю такого пользователя'
}

Но я бы делал так

let res;
switch (user) {
  case 'Ivan': res = 'Пользователя зовут Иван'; break;
  case 'Boris': res = 'Пользователя зовут Борис'; break;
  default:
    res = 'Не знаю такого пользователя';
}

Так код читается гораздо лучше

Answer 2

Лучше так:

Вариант 1

const userText = useMemo(() => {
  switch (user) {
    case 'Ivan':
      return 'Пользователя зовут Иван';
    case 'Boris':
      return 'Пользователя зовут Борис';
    default:
      return 'Не знаю такого пользователя';
  }
}, [user]);

return (
  <div>{userText}</div>
);

Вариант 2

const userTextMap = {
  'Ivan': 'Пользователя зовут Иван',
  'Boris': 'Пользователя зовут Борис';
};

const MyComponent = ({ user }) => {
  return (
    <div>
      {userTextMap[user] || 'Не знаю такого пользователя'}
    </div>

  );
};

БЛОГ НА HUSL

Два if в тернарном операторе react if else

Ответы (2 шт):