jsx中的三元运算符包含带反应的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

我目前喜欢像这样格式化我的三元组:

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可以在render语句和三元表达式中使用.使用普通if .. else语句是有效的,但render函数的return语句只能包含表达式,因此您必须在其他地方执行这些操作.

Answer 2

@Nathan 接受的答案和其他类似的答案是正确的。但值得注意的是， for 的结果?和 for 的结果:都必须是单个元素或包装在单个元素中（或者结果可以是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>
    )
  }
)

Answer 3

三元的语法是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>
  );
}