如何在JSX中使用If-Else

Question

I understand how to use it in simple situations:

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

But how to use it for big DOM?

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

Of course, it doesn't work. How to do it correctly?

Answer 1

You can't do that. I see two potential problems from what you've provided. First, you can only return one DOM node. Second, (and this might be because it's not your full code), your braces are not syntactically correct. Without knowing your full source code, you can try something like:

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

Another way of doing if-else can be done by use of an IIFE as suggested here: 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

Firstly you cannot use multiple components in one statement. You must do like this:

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

Ok, for big DOM, just like this:

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

or

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

BTW, I have created a small library to do a lisp style 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
  )
}
...