条件渲染

核心:使用三元运算符合函数替代直接在jsx中写if..else语句

渲染文本

render(){
    return (
        <div>{isLogged?'退出':'登录'}</div>
    )
}

渲染元素

render(){
    return(
        <div>
            <header>页面头部</header>
            <main>页面内容</main>
            {
                this.state.needFooter&&<footer>页脚</footer>
            }
        </div>
    )
}

注意：0 && expression ，expression仍然会被渲染。

渲染组件

布尔值

render(){
    const component = isLogged?<Complete1>:<Complete2>;
    return(
        <component>
    )
}
​
render(){
    return (
    <div>
        {
            complete&&<List />
        }
     </div>
    )
}

函数式一

showButton(){
    const isLogged = this.state.isLogged;
    if(isLogged){
        return <LogoutButton />
    }else{
        return <LogInButton>
    }
}
render(){
    return(
        <div>{this.showButton}</div>
    )
}

函数式二

function Log(props){
    const isLogged = props.isLogged;
    if(isLogged){
        return <Logged />
    }else{
        return <NoLogged />
    }
}

条件渲染与display:none的区别

使用条件渲染时，组件的DOM并没有加载，只有确定要加载时，组件的DOM才真正的加载到文档中。 使用display:none的时候, 组件看似从网页中消失，实际上DOM节点仍然存在，没有移除。