react 条件渲染

• 条件渲染
  相当于vue的v-if 和 v-show
• 小结
  if else if(A){a}else{b} 通过判断A的布尔值决定执行a或b
  && a&&{b} 通过判断A的布尔值决定要不要执行b
  三目运算符 A?{a}:{b} 通过判断A的布尔值来决定执行a或b
• if else点击退出登录demo

<div id="app">

    </div>
    <script type="text/babel">
        class Demo extends React.Component{
            constructor(props){
                super(props);
            }
            render() {
                let {isLogin} = this.props;
                // 使用if else判断变量jsLogin的值来决定显示什么内容
                // 在react里css样式是两个括号，内部以属性的方式存在的，所以用,分开
                if(isLogin){
                    return(
                        <h1>欢迎回来<button style={{color:'blue'}}>退出登录</button></h1>
                    )
                }else{
                return(
                <h1>你还没登录<button style={{color:'blue'}}>立即登录</button></h1>
                )
                }
            }
        }

        ReactDOM.render(
            <Demo isLogin={false}/>,
            document.querySelector('#app')
        )

    </script>

• 三目运算符 欢迎回来demo

<div id="app">

    </div>
    <script type="text/babel">
        // type="text/babel"
        class Demo extends React.Component{
            constructor(props){
                super(props);
            }
            render() {
                /**
                 * 通过变量isLogin来决定显示什么内容
                 * 使用三目运算符(内容较短的时候用三目运算符)
                 * 再长一点用if else
                 * 更长的内容封装成一个组件更合适
                */
               let {isLogin} = this.props
                // return(
                //     isLogin?<h1>欢迎回来</h1>:<h1>请登录</h1>
                //     // 就单个个体的时候这样，但是一般不这样
                // )   
                return(
                    <div>
                        {isLogin?<h1>欢迎回来</h1>:<h1>请登录</h1>}    
                    </div>
                )
            }
        }

        ReactDOM.render(
            <Demo isLogin={true}/>,
            document.querySelector('#app')
        )

    </script>

• 与字符 && 实现歌词显示隐藏

<div id="app">

    </div>
    <script type="text/babel">
        // type="text/babel"
        class Demo extends React.Component{
            constructor(props){
                super(props);
            }
            render() {
                /**
                 * 如果值为true就显示，为false不显示，相当于vue的v-show
                */
               let {show} = this.props
                return(
                    show &&
                    <p>
                        还记得那天一双旧皮鞋,拉着我走过一横一竖的街    
                    </p>
                )   
            }
        }

        ReactDOM.render(
            <Demo show={true}/>,
            document.querySelector('#app')
        )
    </script>