如何在 JSX 中使用 If-Else

Question

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

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

但是如何将它用于大DOM？

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

当然不行。如何正确地做到这一点？

Answer 1

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

render: function() {
    var header;

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

Answer 2

另一种执行 if-else 的方法可以通过使用此处建议的 IIFE 来完成：https://facebook.github.io/react/tips/if-else-in-JSX.html.

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

Answer 3

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

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

好的，对于大DOM，就像这样：

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

或

{ this.state.show ? (
    <span>
      <span className={this.state.className}>Hi</span>
      {this.state.text}
    </span>
  ) : (
    {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
  )
}
...

如何在 JSX 中使用 If-Else

How to use If-Else in JSX

javascript

reactjs

react-jsx