React学习笔记【8】

致访客
感谢各位一年多的陪伴，因内容调整，本站将于近日迁移到新域名并不再更新主要内容。
特此通知。

第十节

条件渲染

React中条件渲染既是和javascript中，条件运算
如if-else、三元运算符

直接通过条件运算返回要渲染的JSX对象
通过条件运算得出JSX对象，再将JSX对象渲染到模板中

本节代码

import React from 'react';
import ReactDOM from 'react-dom';

function UserGreet(props) {
    return (
        <div>
            <h1>欢迎登录</h1>
        </div>
    )
}

function UserLogin(props) {
    return (
        <div>
            <h1>请先登录</h1>
        </div>
    )
}

class ParentCom extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            isLogin: false
        }
    }
    login = () => {
        this.setState({
            isLogin: true
        })
    }
    render() {
        let element = null;
        if (this.state.isLogin) {
            element = <UserGreet></UserGreet>
        } else {
            element = <UserLogin></UserLogin>
        }
        return (
            <div>
                {/* 直接通过条件运算返回要渲染的JSX对象 */}
                {this.state.isLogin ? <UserGreet /> : <UserLogin />}
                <button onClick={this.login}>登录</button>
                {/* 通过条件运算得出JSX对象，再将JSX对象渲染到模板中 */}
                <hr />
                <div>
                    {element}
                </div>

            </div>
        )
    }
}

ReactDOM.render(
    <ParentCom />
    ,
    document.querySelector("#root")
)