第十节

条件渲染

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

1. 直接通过条件运算返回要渲染的JSX对象
2. 通过条件运算得出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")
)

---

文章标题：React学习笔记【8】
如果文中内容侵犯了您的权益，请及时与博主取得联系进行删除！
本站文章未经许可禁止转载，本文地址：https://blog.wanvale.com/archives/243/