jsx中的三元运算符以包含带有react的html

Question

我正在使用react，并且尝试显示此错误消息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中

Answer 1

我目前喜欢在react中像这样格式化我的三进制：

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语句是有效的，但是render函数的return语句只能包含表达式，因此您必须在其他地方执行这些操作。