React 使用 if else 判斷語句

今天在寫 React 時，在 render 的return中既然不能使用if判斷語句，因此就整理一些在react中使用if 的方式，可根據本身的實際狀況選擇：

方式一：

class LLL extends React.Component { constructor(props){ super(props); this.judge = false } render(){ let Message if (this.judge) { Message = ( <span> <h5>It`s my life!</h5> </span> ) } else { Message = ( <h5>I think that's more than just like it!</h5> ) } return( <div> <h4>Wellcom LLL</h4> {Message} </div> ); } } 

方式二：

class LLL extends React.Component { constructor(props){ super(props); this.judge = false } Message(){ if (this.judge) { return ( <span> <h5>It`s my life!</h5> </span> ) } else { return ( <h5>I think that's more than just like it!</h5> ) } } render(){ return( //1 <div> <h4>Wellcom LLL</h4> {this.Message()} </div> ); } } 

方式三：三元運算符

class LLL extends React.Component { constructor(props){ super(props); this.judge = false } render(){ return( //1 <div> <h4>Wellcom LLL</h4> {this.judge ? "It`s my life!" : "I think that's more than just like it!"} </div> ); } } 

方式四：

class LLL extends React.Component {
    constructor(props){
        super(props);
        this.judge = false
    }

    render(){
        return(
            //1
            <div> <h4>Wellcom LLL</h4> { this.judge ? <span> <h5>It`s my life!</h5> </span> : <h5>I think that's more than just like it!</h5> } </div> ); } }