React 使用 if else 判断语句
<div><p>今天在写 React 时，在 render 的return中既然不能使用if判断语句，所以就整理一些在react中使用if 的方式，可根据自己的实际情况选择：</p>
<h5>方式一：</h5>
<pre class="hljs javascript"><code class="javascript"><span class="hljs-class"><span class="hljs-keyword">class <span class="hljs-title">LLL <span class="hljs-keyword">extends <span class="hljs-title">React.<span class="hljs-title">Component {
<span class="hljs-keyword">constructor(props){
<span class="hljs-keyword">super(props);
<span class="hljs-keyword">this.judge = <span class="hljs-literal">false
}
render(){
<span class="hljs-keyword">let Message
<span class="hljs-keyword">if (<span class="hljs-keyword">this.judge) {
Message = (
<span class="xml"><span class="hljs-tag"><<span class="hljs-name">span>
<span class="hljs-tag"><<span class="hljs-name">h5>It`s my life!<span class="hljs-tag"></<span class="hljs-name">h5>
<span class="hljs-tag"></<span class="hljs-name">span>
)
} <span class="hljs-keyword">else {
Message = (
<span class="xml"><span class="hljs-tag"><<span class="hljs-name">h5>I think that's more than just like it!<span class="hljs-tag"></<span class="hljs-name">h5>
)
}
<span class="hljs-keyword">return(
<span class="xml"><span class="hljs-tag"><<span class="hljs-name">div>
<span class="hljs-tag"><<span class="hljs-name">h4>Wellcom LLL<span class="hljs-tag"></<span class="hljs-name">h4>
{Message}
<span class="hljs-tag"></<span class="hljs-name">div>
);
}
}
</span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></code></pre>
<h5>方式二：</h5>
<pre class="hljs cpp"><code class="cpp"><span class="hljs-class"><span class="hljs-keyword">class <span class="hljs-title">LLL <span class="hljs-title">extends <span class="hljs-title">React.<span class="hljs-title">Component {
constructor(props){
super(props);
<span class="hljs-keyword">this.judge = <span class="hljs-literal">false
}
Message(){
<span class="hljs-keyword">if (<span class="hljs-keyword">this.judge) {
<span class="hljs-keyword">return (
<span>
<h5>It`s my life!</h5>
</span>
)
} <span class="hljs-keyword">else {
<span class="hljs-keyword">return (
<h5>I think that's more than just like it!</h5>
)
}
}
render(){
<span class="hljs-keyword">return(
<span class="hljs-comment">//1
<div>
<h4>Wellcom LLL</h4>
{<span class="hljs-keyword">this.Message()}
</div>
);
}
}
</span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></code></pre>
<h5>方式三：三元运算符</h5>
<pre class="hljs cpp"><code class="cpp"><span class="hljs-class"><span class="hljs-keyword">class <span class="hljs-title">LLL <span class="hljs-title">extends <span class="hljs-title">React.<span class="hljs-title">Component {
constructor(props){
super(props);
<span class="hljs-keyword">this.judge = <span class="hljs-literal">false
}
render(){
<span class="hljs-keyword">return(
<span class="hljs-comment">//1
<div>
<h4>Wellcom LLL</h4>
{<span class="hljs-keyword">this.judge ? <span class="hljs-string">"It`s my life!" : <span class="hljs-string">"I think that's more than just like it!"}
</div>
);
}
}
</span></span></span></span></span></span></span></span></span></span></span></span></span></code></pre>
<h5>方式四：</h5>
<pre class="hljs xml"><code class="xml">class LLL extends React.Component {
constructor(props){
super(props);
this.judge = false
}
render(){
return(
//1
<span class="hljs-tag"><<span class="hljs-name">div>
<span class="hljs-tag"><<span class="hljs-name">h4>Wellcom LLL<span class="hljs-tag"></<span class="hljs-name">h4>
{
this.judge
?
<span class="hljs-tag"><<span class="hljs-name">span>
<span class="hljs-tag"><<span class="hljs-name">h5>It`s my life!<span class="hljs-tag"></<span class="hljs-name">h5>
<span class="hljs-tag"></<span class="hljs-name">span>
:
<span class="hljs-tag"><<span class="hljs-name">h5>I think that's more than just like it!<span class="hljs-tag"></<span class="hljs-name">h5>
}
<span class="hljs-tag"></<span class="hljs-name">div>
);
}
}
</span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></code></pre>
</div>
<p><br><br></p><br><br>
来源：https://www.cnblogs.com/dtdxrk/p/11287112.html
頁:
[1]