如何使用的if-else在JSX

我知道如何在簡單情況下使用它：如何使用的if-else在JSX

{(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} 
} 
}

當然，它不起作用。如何正確地做到這一點？

來源

2015-02-06 Nick Bolsh

你不能那樣做。我看到您提供的兩個潛在問題。首先，你只能返回一個DOM節點。其次，（這可能是因爲它不是你的完整代碼），你的大括號在語法上不是正確的。不知道你的全部源代碼，你可以嘗試這樣的：https://facebook.github.io/react/tips/if-else-in-JSX.html：

render: function() { 
    var header; 

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

來源

2015-02-06 01:09:41 awei

我s ee，謝謝！ – 2015-02-06 01:12:34

@NickBolsh，如果答案對你有用，你還應該點擊向上投票按鈕:-) – FakeRainBrigand 2015-02-06 02:39:51

@FakeRainBrigand，你是對的！完成。 – 2015-02-06 03:01:20

做的if-else可以通過使用IIFE來完成的建議在這裏的另一種方式。

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

來源

2016-01-30 17:40:43

首先，您不能在一個語句中使用多個組件。你必須這樣做：

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

BTW，我創建了一個小型圖書館做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 
) 
} 
...

來源

2016-04-08 05:10:01

如何使用的if-else在JSX

回答

相關問題