条件渲染

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
    <script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
    <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>

</head>
<body>
    <div id="app"></div>
    
    <script type="text/babel">
        // 封装App 组件
        class App extends React.Component{ 
            constructor(){
                super(); 
                this.state = { 
                    isLogin:true 
                } 
  
            }

            render(){ 
                const {isLogin} = this.state;
                let welcome = null;
                let btnText = null;
                if(isLogin){
                    welcome = <h2>欢迎回来</h2> 
                    btnText = "退出"
                }else{
                    welcome = <h2>请先登录~</h2> 
                    btnText = "登录"
                }
 
                return ( 
                 
                    <div>  
                        {welcome}
                        <button onClick={e=> this.loginClick()}>{btnText}</button>  
                        <br /> 
                        <hr/>
                        <button onClick={e=> this.loginClick()}>{isLogin ? "退出" : "登录"}</button>
                   
                         <h2>{isLogin && "你好呀,Eric"}</h2>
                    </div> 
                )
            }
 
            loginClick(){
                this.setState({
                    isLogin: !this.state.isLogin
                })
            }
  
        }
 
        ReactDOM.render(<App/>,document.getElementById('app')); 
    </script>
</body>
</html>
 
-------------------------
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
    <script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
    <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>

</head>
<body>
    <div id="app"></div>
    
    <script type="text/babel">
        // 封装App 组件
        class App extends React.Component{ 
            constructor(){
                super(); 
                this.state = { 
                    isLogin:true 
                }  
            }

            render(){ 
                const {isLogin} = this.state;
                let titleDisplayValue = isLogin ? 'block':'none';
 
                return ( 
                 
                    <div>   
                         <h2 style={{display: titleDisplayValue}}>你好呀,Eric</h2>
                         <button onClick={e=> this.loginClick()}>{isLogin ? "退出" : "登录"}</button>
                    </div> 
                )
            }
 
            loginClick(){
                this.setState({
                    isLogin: !this.state.isLogin
                })
            }
  
        }
 
        ReactDOM.render(<App/>,document.getElementById('app')); 
    </script>
</body>
</html>
posted @ 2021-08-10 17:59  13522679763-任国强  阅读(19)  评论(0)    收藏  举报