изменение тернарного оператора на нетернарный

Question

Я новый javascript (реагирующий) программист, пытаюсь изменить тернарный оператор на нормальный if else, вот мой вопрос: я хочу добавить строку в свойство textDecoration, если оно завершено, и 'else' i ничего не хочу, код, который у меня есть для тернарного оператора, работает, но я хочу изменить его на нестандартный (нормальный, если еще), вот троичная версия:

function Todo({todo}) {
    return <div style={{
      textDecoration: tod.isCompleted ? 'line-through' : ''
    }} />;
}

вот что я пытался сделать:

function Todo({todo}) {
  return <div style={{
    if (todo.isCompleted) {
      'line-through'
    } else {
      ''
    }} />;
}

Answer 1

Мне интересно, что плохого в использовании троичности? Это вполне приемлемо.

В любом случае вы не можете иметь if / else внутри такого JSX-элемента. Я бы выделил текстовое оформление в переменную следующим образом:

function Todo({todo}){
  let textDecoration = '';
  if(todo.isCompleted){
    textDecoration = 'line-through';
  }
  return <div style={{textDecoration}}/>;
}

В качестве забавы есть предложение иметь что-то вроде того, что вы продемонстрировали. Его еще нет в javascript, и я не думаю, что он появится в ближайшее время. Но если вы используете babel, вы можете поиграть с ним, если захотите. Это выражение do. Вы бы использовали его так:

function Todo({todo}){
  return <div style={{
    textDecoration: do {
        if(todo.isCompleted){
            'line-through';
        }
        else {
            '';
        }
    }
  }}/>;
}

Хотя я не очень рекомендую его. Я просто подумал, что предоставлю это как немного забавного знания. Вот ссылка на него: babel

Вы можете прочитать предложение здесь: https://github.com/tc39/proposal-do-expressions