Тройной оператор в jsx включить html с реакцией

Я использую реакцию, и я пытаюсь отобразить это сообщение об ошибке, если this.state.message === 'failed'. Но я действительно не знаю, почему эта тройная операция не работает. Что я здесь делаю неправильно?

render() {
...
<div className="row">
return (this.state.message === 'failed') ? ( => {
     <div className="alert alert-danger" role="alert">
       Something went wrong
     </div>
})() : false;
}
</div>

В настоящее время его просто отображается return (this.state.message === 'failed') ? ( => в html

Ответ 1

Мне в настоящее время нравится форматировать мои троицы следующим образом:

render () {
  return (
    <div className="row">
      { //Check if message failed
        (this.state.message === 'failed')
          ? <div> Something went wrong </div> 
          : <div> Everything in the world is fine </div> 
      }
    </div>
  );
}

Вы правы, что IIFE могут использоваться как в выражении, так и в тернарных выражениях. Использование нормального оператора if .. else допустимо, но оператор return render может содержать только выражения, поэтому вам придется делать это в другом месте.

Ответ 2

Синтаксис тройного значения condition ? if : else. Чтобы быть в безопасности, вы всегда можете обернуть весь тройной оператор в круглых скобках. Элементы JSX также заключены в круглые скобки. Жирная стрелка в функции стрелки всегда предшествует двум скобкам (для аргументов), но в любом случае вам не нужны никакие функции. Поэтому, учитывая все это, в вашем коде есть несколько синтаксических ошибок. Здесь рабочее решение:

render() {
  return (this.state.message === 'failed' ? (
   <div className="alert alert-danger" role="alert">
     Something went wrong
   </div>
  ) : null);
}

Изменить: если это внутри другой разметки, вам не нужно снова вызывать рендер. Вы можете просто использовать фигурные скобки для интерполяции.

render() {
  return (
    <div className="row">
      {this.state.message === 'failed' ? (
       <div className="alert alert-danger" role="alert">
         Something went wrong
       </div>
      ) : null}
    </div>
  );
}

Ответ 3

Вы должны попробовать следующее:

render () {
    return (
        <div className="row">
            { (this.state.message === 'failed') ?
                 <div className="alert alert-danger" role="alert">
                     Something went wrong
                 </div> :
                 <span> Everything in the world is fine </span> }
        </div>
    );
}

Ответ 4

Для использования переменных внутри тернарных скобок снова

render() {
  return(
    <div className='searchbox'>
     {this.state.var ? <div className='warning'>{this.state.var}</div> : ''}
    </div>
  )
}

Ответ 5

Принятый ответ @Nathan и другие подобные ответы правильные. Но стоит отметить, что результат для ? и результат для : должны быть единым элементом или завернуты в один элемент (или результат может быть null | undefined, любой из которых квалифицируется как один элемент). В приведенном ниже примере результат для ? будет работать, но результат для : завершится неудачно....

return (
  {this.state.message === 'failed' ? (
      <div>
        <row>three elements wrapped</row>
        <row>inside</row>
        <row>another element work.</row>
      </div>
    ) : (
      <row>html like</row>
      <row>haiku</row>
      <row>must follow rules of structure.</row>
    )
  }
)