基础条件渲染:
import React from 'react';
import ReactDOM from 'react-dom';
function UserGreet(props){
return (<h1>欢迎登陆</h1>)
}
function UserLogin(props){
return (<h1>请先登录</h1>)
}
class ParentCom extends React.Component{
constructor(props){
super(props)
this.state = {
isLogin:true
}
}
render(){
if(this.state.isLogin){
return (<UserGreet></UserGreet>)
}else{
return (<UserLogin></UserLogin>)
}
//三元表达式 {this.state.isLogin?<UserGreet/>:<UserLogin/>}
}
}
ReactDOM.render(
<ParentCom></ParentCom>,
document.querySelector('#root')
)
复杂条件渲染:
条件复杂则可以用 else if 等多条件判断,后补