React 使用 if else 判断语句

Z时代
2024-01-10
分类：综合

react

今天在写 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>
        );
    }
}