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

index.js

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() {
                        if (this.state.isLogin) {
                            if (this.state.isLogin) {
                                return ( < UserGree > < /UserGree>)
                                }
                                else {
                                    return ( < UserLogin > < /UserLogin>)
                                    }
                                }
                            }
                        }
                        //console.log("这是渲染函数")
                        ReactDOM.render( < ParentCom / > , document.querySelector("#root"))

运行结果