在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>
)
}
}
方案五:
// 拆分成小函數
class HelloMessage extends React.Component {
renderLogin() { // 如果這裏有多行,推薦用這種方法
const {loggedIn, name} = this.props;
if (!loggedIn) return;
return (<span>
<h2>Welcome Back {name}</h2>
<p>You can visit settings to reset your password</p>
</span>);
}
render (){
return(
<div>
<h1>My Super React App</h1>
{this.renderLogin()}
</div>
);
}
}
綜上:短小的字段判斷只能用三元表達式,如果是大塊的元素都需要區分,就要利用變量了。