[标准]React条件渲染与复杂条件渲染

zhuanbike 2022-1-7 728

基础条件渲染:

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 等多条件判断,后补

最新回复 (0)
发新帖