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

三进制的语法是condition ? if : else。为了安全起见，您可以始终将整个三元语句 Package 在括号内。JSX元素也用括号括起来。箭头函数中的胖箭头前面总是有两个圆括号（用于参数）-但无论如何，这里不需要任何函数。因此，考虑到所有这些，您的代码中存在一些语法错误。这里有一个工作解决方案：

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

编辑：如果这是在其他标记中，那么你不需要再次调用render。你可以只使用花括号进行插值。

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

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

你应该试试这个：

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

根据上面的答案，您还可以在render()中直接返回来自return()的三元表达式，如下所示

return condition? this.function1(): this.function2();

在function1（）和function2（）中，你可以返回你的视图。

对于在三进制中使用变量，请再次使用方括号

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

请记住，三进制表达式应该 Package 在一个片段或div中，如果没有 Package 它将抛出一个编译错误

return (
        <Fragment>
            {fetching ? <Loading></Loading> : <p>Fetched</p>}
        </Fragment>
);

另一个使用React简写片段（如<>...</>）和组件（函数而不是类）的答案：

return (
        <>
            {fetching ? <Loading></Loading> : <p>Fetched</p>}
        </>
);

{/* If / Else If / Else */}
<div className="row">
    { this.state.message === 'failed' ? '🐞 Something went wrong'
    : this.state.message === 'pending' ? '⌛️ wait a minute...'
    : this.state.message === 'ok' ? '👌 Everything in the world is fine'
    : '👻 Good bye'}
</div>