lovecoding
/
W250913


			
				
					
						
						
							1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283
							<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./babel.min.js"></script>
    <script src="./react.development.js"></script>
    <script src="./react-dom.development.js"></script>
</head>

<body>
    <div id="root"></div>
    <!-- v-if React 没有
        实现条件渲染：
            三元判断
            if else 
            switch case 
    -->
    <script type="text/babel">
        class App extends React.Component {
            constructor() {
                super();
                this.state = {
                    isLogin: true
                }
                this.handleClick = this.handleClick.bind(this)
            }

            // LoginMain = () => {
            //     console.log("你好")
            //    return this.state.isLogin ? (
            //         <div>已登录</div>
            //     ) : (
            //         <div>未登录</div>
            //     )
            // }
            // LoginMain = ()=> {
            //     if(this.state.isLogin) {
            //         return   <div>已登录</div>
            //     }else {
            //         return   <div>未登录</div>
            //     }
            // }
            LoginMain = ()=> {
                switch(this.state.isLogin) {
                    case true :
                            return  <div>已登录</div>
                    case '111':
                            return <div>111</div>
                    default:   
                            return   <div>未登录</div> 
                    }
            }
            handleClick() {
                this.setState({
                    isLogin: !this.state.isLogin
                })
            }
            render() {
                // return (
                //     <div>
                //         <h1>条件渲染</h1>
                //         {this.LoginMain()}
                //         <button onClick={this.handleClick}>修改状态</button>
                //     </div>
                // )
               return( 
                this.state.isLogin ? 
                 (<div>已登录</div>) : 
                 ( <div>未登录</div>)
                )
            }
        }
        const element = <App/>
        const container = document.getElementById("root");
        const root = ReactDOM.createRoot(container)
        root.render(element);
    </script>
</body>

</html>