Javascript 如何在JSX中使用If-Else

我了解如何在简单的情况下使用它：

{(this.state.show) ? <span>Show</span> : null}

{（this.state.show）？show:null}

但是如何在大DOM中使用它呢

{ if (this.state.show) {
  <span className={this.state.className}>Hi</span>
  {this.state.text}
} else {
  {this.state.text}
}
}

{if（this.state.show）{
你好
{this.state.text}
}否则{
{this.state.text}
}
}

---

当然，它不起作用。如何正确地做

你不能那样做。我从您提供的内容中看到两个潜在问题。首先，您只能返回一个DOM节点。其次，（这可能是因为它不是您的完整代码），大括号在语法上不正确。在不了解完整源代码的情况下，您可以尝试以下操作：

render: function() {
    var header;

    if (this.state.show) {
        header = <span className={ this.state.className }>Hi</span>;
    }
    return <div>
               { header }
               { this.state.text }
           </div>
}

render:function（）{
var头；
if（this.state.show）{
标题=Hi；
}
返回
{header}
{this.state.text}
}

另一种方法是使用iLife完成if-else，如下所示：

{（（）=>{
if（this.state.show）{
你好
{this.state.text}
}否则{
{this.state.text}
}
})()}

首先，不能在一条语句中使用多个组件。 你必须这样做：

if (this.state.show) {
  <span>
    <span className={this.state.className}>Hi</span>
    {this.state.text}
  </span>
} else {
  {this.state.text}
}

if（this.state.show）{
你好
{this.state.text}
}否则{
{this.state.text}
}

好的，对于大DOM，如下所示：

{() => {
  { if (this.state.show) {
    <span>
      <span className={this.state.className}>Hi</span>
      {this.state.text}
    </span>
    } else {
      {this.state.text}
    }
}}

{（）=>{
{if（this.state.show）{
你好
{this.state.text}
}否则{
{this.state.text}
}
}}

或

{this.state.show(
你好
{this.state.text}
) : (
{this.state.text}
)
}

顺便说一句，我创建了一个小库来实现lisp风格的if-else

import { _if } from 'jsxcond';

...

{ _if( this.state.show, 
    () => (
      <span>
        <span className={this.state.className}>Hi</span>
        {this.state.text}
      </span>
    ), 
    this.state.text
  )
}
...

从'jsxcond'导入{u if}；
...
{u如果（this.state.show，
() => (
你好
{this.state.text}
), 
这个是.state.text
)
}
...

@NickBolsh，如果答案对你有用，你也应该单击向上投票按钮：-）是的，这是推荐的方式，这里是文档

import { _if } from 'jsxcond';

...

{ _if( this.state.show, 
    () => (
      <span>
        <span className={this.state.className}>Hi</span>
        {this.state.text}
      </span>
    ), 
    this.state.text
  )
}
...