Question

我正在使用react，我试图在animate()时显示此错误消息。但我真的不确定为什么这种三元手术不起作用。我在这里做错了什么？

this.state.message === 'failed'

现在它只是在html中显示render() { ... <div className="row"> return (this.state.message === 'failed') ? ( => { <div className="alert alert-danger" role="alert"> Something went wrong </div> })() : false; } </div>

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

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

Answer 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>
    );
}

Answer 4

再次使用变量内部三元使用括号

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

Answer 5

鉴于上述答案，您还可以直接从[{1}}中return()直接返回三元表达式

render()

并且在function1（）和function2（）内部，您可以返回您的视图。

Answer 6

@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>
    )
  }
)

jsx中的三元运算符包含带反应的html

6 个答案: