zoukankan      html  css  js  c++  java
  • 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>
            );
        }
    }
    



  • 相关阅读:
    关于互联网下的大数据及大数据对人的影响
    综合练习:词频统计=
    五星红旗
    页面性能
    前端一些常见的基础知识
    h5常见问题汇总及解决方案
    CF 184
    2013520 训练赛后总结
    斜率优化动态规划
    2013522 完美世界复赛第三场
  • 原文地址:https://www.cnblogs.com/dtdxrk/p/11287112.html
Copyright © 2011-2022 走看看