React中使用if else 条件判断（转）

在react中用jsx渲染dom的时候经常会遇到if条件判断，然而在jsx中竟是不允许if条件判断的。以下有几种判断方式，可以根据自己的应用场景，挑选适合的。

方案一：
class HelloMessage extends React.Component {
render (){
let userMessage;
if (this.props.loggedIn) {
userMessage = (
<span>
<h2>{ Welcome Back ${ this.props.name } }</h2>
<p>You can visit settings to reset your password</p>
</span>
)
} else {
userMessage = (
<h2>Hey man! Sign in to see this section</h2>
)
}
return(
<div>
<h1>My Super React App</h1>
{userMessage}
</div>
)
}
}

方案二：
class HelloMessage extends React.Component {

renderUserMessage(){
if (this.props.loggedIn) {
return (
<span>
<h2>{ Welcome Back ${ this.props.name } }</h2>
<p>You can visit settings to reset your password</p>
</span>
);
} else {
return (
<h2>Hey man! Log in to see this section</h2>
);
}
}

render (){
return(
<div>
<h1>My Super React App</h1>
{ this.renderUserMessage() }
</div>
)
}
}

方案三：三元运算符
class HelloMessage extends React.Component {
render (){
return(
<div>
<h1>
{ this.props.loggedIn ? 'You are logged In' : 'You are not logged In' }
</h1>
</div>
)
}

方案四:
class HelloMessage extends React.Component {
render (){
return(
<div>
<h1>My Super React App</h1>
{ this.props.loggedIn ?
<span>
<h2>{ Welcome Back ${ this.props.name } }</h2>
<p>You can visit settings to reset your password</p>
</span>
:
<h2>Hey man! Log in to see this section</h2>
}
</div>
)
}
}

综上：短小的字段判断只能用三元表达式，如果是大块的元素都需要区分，就要利用变量了。

作者：践道修行者
链接：https://www.jianshu.com/p/548742bbda59
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。