前端学习（2230）：react条件渲染实现登录二

import React from 'react';
import ReactDOM from 'react-dom';


function UserGree(props) {
    return ( < h1 > 欢迎登陆 < /h1>)
    }

    function UserLogin(props) {
        return ( < h1 > 请先登陆 < /h1>)
        }
        class ParentCom extends React.Component {
                constructor(props) {
                    super(props)
                    this.state = {
                        isLogin: true
                    }
                }
                render() {
                        let element = null
                        if (this.state.isLogin) {
                            if (this.state.isLogin) {
                                element = ( < UserGree > < /UserGree>)
                                }
                                else {
                                    element = ( < UserLogin > < /UserLogin>)
                                    }

                                    return ( <
                                            div >
                                            <
                                            h1 > 我是头部 < /h1> { element } <
                                            h1 > 三元运算符的 < /h1>  { this.state.isLogin ?  <
                                            UserGree > < /UserGree>: < UserLogin > < /UserLogin >
                                        } <
                                        h1 > 我是尾部 < /h1> < /
                                    div >
                                )
                            }
                        }
                    }
                    //console.log("这是渲染函数")
                ReactDOM.render( < ParentCom / > , document.querySelector("#root"))

运行结果