四时宝库

import React from "react";
import 'bootstrap/dist/css/bootstrap.min.css';

const infoMap = {
    loggedInInfo: '欢迎登录此系统。',
    loggedOutInfo: '请先登录系统。',
    loginButtonInfo: '登录',
    logoutButtonInfo: '退出登录',
    stateInfo: '当前状态为：',
    scoreInfo: '得分',
    passInfo: '分，通过考试。',
    notPassInfo: '分，未通过考试。',
    passScore: 60,
    btnInfo: '按钮的使用2：',
    cool: '今天真冷。',
    warm: '今天气温舒适。',
    hot: '今天有点热。',
    veryHot: '今天真的很热。',
    how: '今天气温如何？',
    coolStandard: 0,
    warmStandard: 25,
    hotStandard: 39,
    title1Info: 'if条件简单示例',
    trueInfo: '初始条件为true的结果：',
    falseInfo: '初始条件为false的结果：',
    title2Info: '按钮的使用1：',
    title3Info: '与(&&)运算和或(||)运算的简单示例',
    title4Info: '三目运算简单示例',
    temperature: 25,
    temperatureUnit: '度，',
}

function UserLoggedInComp(props) {
    return <span>{infoMap.loggedInInfo}</span>
}

function UserLoggedOutComp(props) {
    return <span>{infoMap.loggedOutInfo}</span>
}

// 用if语句进行条件渲染
function UserLoggedComp(props) {
    const isLogged = props.isLogged;
    if (isLogged) {
        return <UserLoggedInComp />;
    } else {
        return <UserLoggedOutComp />;
    }
}

// 登录按钮组件
function LoginButton(props){
    return (
        <button className="btn btn-mt-3 btn-primary btn-block my-2" onClick={props.onClick}>
            {infoMap.loginButtonInfo}
        </button>
    );
}

// 退出登录按钮组件
function LogoutButton(props){
    return (
        <button className="btn btn-mt-3 btn-primary btn-block my-2" onClick={props.onClick}>
            {infoMap.logoutButtonInfo}
        </button>
    );
}

// 条件登录控件组件
class LoginControl extends React.Component {
    constructor(props) {
        super(props);
        this.handleLoginClick = this.handleLoginClick.bind(this);
        this.handleLogoutClick = this.handleLogoutClick.bind(this);
        this.isLoggedIn = props.isLoggedIn;
    }

    handleLoginClick() {
        this.isLoggedIn = !this.isLoggedIn;
        alert(infoMap.stateInfo + this.isLoggedIn);
    }

    handleLogoutClick(){
        this.isLoggedIn = !this.isLoggedIn;
        alert(infoMap.stateInfo + this.isLoggedIn)
    }

    render() {
        let button;
        if (this.isLoggedIn){
            button = <LogoutButton onClick={this.handleLogoutClick} />;
        } else {
            button = <LoginButton onClick={this.handleLoginClick} />;
        }
        return (
            <div>
                <UserLoggedComp isLogged={this.isLoggedIn} />
                {button}
            </div>
        );
    }
}

const score = [90, 60, 50];
function PassTestComp(props) {
    return (
        <p>
            {infoMap.scoreInfo}<b>{props.score}</b>{infoMap.passInfo}
        </p>
    )
}
function NotPassTestComp(props) {
    return(
        <p>
            {infoMap.scoreInfo}<b>{props.score}</b>{infoMap.notPassInfo}
        </p>
    );
}

// 使用&&和||
function TestPass(props){
    const score = props.score;
    return (
        <div>
            {
                (score >= infoMap.passScore && <PassTestComp score={score} />) || (score < infoMap.passScore && <NotPassTestComp score={score} />)
            }
        </div>
    );
}

// 运用三目运算
function TestPass2(props) {
    const score = props.score;
    return (
        <div>
            {
                (score >= infoMap.passScore ? <PassTestComp score={score} /> : <NotPassTestComp score={score} />)
            }
        </div>
    );
}

function Banner(props) {
    if (!props.isBanner){
        return null;
    }
    return (
        <div className="banner">
            {infoMap.btnInfo}
        </div>
    );
}

class BannerComp extends React.Component {
    constructor(props) {
        super(props);
        this.showBanner = props.showBanner;
        this.handleToggleClick = this.handleToggleClick.bind(this);
    }

    handleToggleClick() {
        alert(this.showBanner)
    }

    render() {
        return (
            <div>
                <Banner isBanner={this.showBanner} />
                <button className="btn btn-mt-3 btn-primary btn-block my-2" onClick={this.handleToggleClick}>
                    {this.showBanner ? '隐藏' : '显示'}
                </button>
            </div>
        );
    }
}

function TempLevel(props){
    if (props.wLevel <= infoMap.coolStandard){
        return <p>{infoMap.cool}</p>;
    } else if ((props.wLevel > infoMap.coolStandard) && (props.wLevel <= infoMap.warmStandard)){
        return <p>{infoMap.warm}</p>;
    } else if ((props.wLevel > infoMap.warmStandard) && (props.wLevel <= infoMap.hotStandard)){
        return <p>{infoMap.hot}</p>;
    } else if (props.wLevel > infoMap.hotStandard) {
        return <p>{infoMap.veryHot}</p>
    } else {
        return <p>{infoMap.how}</p>
    }
}

class WaterTempComp extends React.Component {
    constructor(props) {
        super(props);
        this.temperature = props.temperature;
    }
    render() {
        const temperature = this.temperature;
        return (
            <TempLevel wLevel={parseFloat(temperature)}/>
        );
    }

}

const IfExample = () => {
    return (
    <span>
        <h3>{infoMap.title1Info}</h3>
        {infoMap.trueInfo}<UserLoggedComp isLogged={true}/>
        <br/>
        {infoMap.falseInfo}<UserLoggedComp isLogged={false}/>
        <hr/>
        {infoMap.title2Info}<LoginControl isLoggedIn={true}/>
        <LoginControl isLoggedIn={false}/>
        <hr/>
        <h3>{infoMap.title3Info}</h3>
        <TestPass score={score[0]} />
        <TestPass score={score[1]} />
        <TestPass score={score[2]} />
        <hr/>
        <h3>{infoMap.title4Info}</h3>
        <TestPass2 score={score[0]} />
        <TestPass2 score={score[1]} />
        <TestPass2 score={score[2]} />
        <hr/>
        <BannerComp showBanner={true} />
        <hr/>
        {infoMap.temperature}{infoMap.temperatureUnit}<WaterTempComp temperature={infoMap.temperature} />
    </span>
    )
    
}

export default IfExample;

运行效果：