React-条件渲染简单示例

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 {infoMap.loggedInInfo}}function UserLoggedOutComp(props) { return {infoMap.loggedOutInfo}}// 用if语句进行条件渲染function UserLoggedComp(props) { const isLogged = props.isLogged; if (isLogged) { return ; } else { return ; }}// 登录按钮组件function LoginButton(props){ return ( {infoMap.loginButtonInfo} );}// 退出登录按钮组件function LogoutButton(props){ return ( {infoMap.logoutButtonInfo} );}// 条件登录控件组件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 = ; } else { button = ; } return (

{button} ); }}const score = [90, 60, 50];function PassTestComp(props) { return (

{infoMap.scoreInfo}{props.score}{infoMap.passInfo}

)}function NotPassTestComp(props) { return(

{infoMap.scoreInfo}{props.score}{infoMap.notPassInfo}

);}// 使用&&和||function TestPass(props){ const score = props.score; return ( { (score >= infoMap.passScore && ) || (score < infoMap.passScore && ) } );}// 运用三目运算function TestPass2(props) { const score = props.score; return ( { (score >= infoMap.passScore ? : ) } );}function Banner(props) { if (!props.isBanner){ return null; } return ( {infoMap.btnInfo} );}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 ( {this.showBanner ? '隐藏' : '显示'} ); }}function TempLevel(props){ if (props.wLevel <= infoMap.coolStandard){ return

{infoMap.cool}

; } else if ((props.wLevel > infoMap.coolStandard) && (props.wLevel <= infoMap.warmStandard)){ return

{infoMap.warm}

; } else if ((props.wLevel > infoMap.warmStandard) && (props.wLevel <= infoMap.hotStandard)){ return

{infoMap.hot}

; } else if (props.wLevel > infoMap.hotStandard) { return

{infoMap.veryHot}

} else { return

{infoMap.how}

}}class WaterTempComp extends React.Component { constructor(props) { super(props); this.temperature = props.temperature; } render { const temperature = this.temperature; return ( ); }}const IfExample = => { return (

{infoMap.title1Info}

{infoMap.trueInfo}
{infoMap.falseInfo}

---

{infoMap.title2Info}

---

{infoMap.title3Info}

---

{infoMap.title4Info}

---

---

{infoMap.temperature}{infoMap.temperatureUnit} ) }export default IfExample;

运行效果：