react条件渲染

一、对视图条件进行切换

例1：

import React from 'react';
export default class IfDemo extends React.Component{
    constructor(){
        super()
        this.state = {
            isLogin: true
        }
    }
    clickHeack =()=>{
        this.setState({
            isLogin: false
        })
    }
    render(){
        let showView = this.state.isLogin?
            <div>请登录</div> 
            : 
            <div>已登录</div>
        return(
            <div>
                <h1>条件渲染</h1>
                <div>{showView}</div>
                <button onClick={this.clickHeack}>登录</button>
            </div>
        )
    }
}

例2：

import React from 'react';

function UserGreeting() {
    return <h1>Welcome back!</h1>;
  }
  
function GuestGreeting() {
    return <h1>Please sign up.</h1>;
}
  
function Greeting(props) {
    const isLoggedIn = props.isLoggedIn;
    if (isLoggedIn) {
      return <UserGreeting />;
    }
    return <GuestGreeting />;
}
  

export default class IfDemo extends React.Component{
    constructor(){
        super()
        this.state = {
            isLogin: false
        }
    }

    clickHeack =()=>{
        this.setState({
            isLogin: true
        })
    }
    
    render(){       
        return(
            <div>
                <h1>条件渲染</h1>
                <Greeting isLoggedIn={this.state.isLogin}></Greeting>
                <button onClick={this.clickHeack}>登录</button>
            </div>
        )
    }
}

二、做缺省值

例3：

import React from 'react';

export default class IfDemo extends React.Component{
    constructor(){
        super()
        this.state = {
            // isLogin: false,
            names:["张三","李四","王五"]
        }
    }

    render(){  
        // const names = this.state.names; 
        const {names} = this.state;    
        return(
            <div>
                {names.length>0 ?
                    <div>
                    {
                        names.map((item,index)=>{
                        return <p key={index}>{item}</p>
                        })
                    }
                    </div>
                    :
                    <div>请等待，数据正在请求...</div>
                }    
            </div>
        )
    }
}

效果如下：

如果this.state.name中的数据为空，即：

this.state = {      
   names:[]
}

则显示为：