react -元素变量

使用变量来储存元素。它可以帮助你有条件的渲染组件的一部分，而输出的其他部分不会更改。

import React,{Component} from 'react'
export default class If extends Component{

   
    render(){
        // 显示文字的组件
        function Wel(){
            return <h2>welcome lily</h2>
        }
        function Guest(){
            return <h2>please sign in up</h2>
        }
        function Greeting (props){
            // let isLogin=props.isLogin;
            if(props.isLogin){  //根据 <Greeting isLogin={isLogin}/> 传入的props属性：isLogin的true或false渲染文字
                 return(
                    <Wel />
                    )
            }else{
                return <Guest />
            }
           
        }
        // 元素变量 button
        function LoginButton(props){   
            return <button onClick={props.onCick}>Login</button>  //props.onClick 接收属性 onCick={(e) => this.handleClick(e)}
        }
        function LogoutButton(props){
            return <button onClick={props.onClick}>Logout</button>
        }
        class LoginControl extends Component{  //创建一个名为 LoginControl 的有状态的组件
            constructor(props){
                super(props)
                this.state={
                    isLogin:false
                }
            }
            handleClick(){
                console.log(111)
                this.setState({
                    isLogin:false
                })
            }
            handleClick2(){
                console.log(222)
                this.setState({
                    isLogin:true
                })
            }
            render(){
               const isLogin=this.state.isLogin
               let button=null
               if(isLogin){
                   button=<LoginButton onCick={(e) => this.handleClick(e)}/> //onCick 是作为props属性 传给类LoginButton  
               }else{
                  button= <LogoutButton onClick={(e) => this.handleClick2(e)}/>
               }
               return(
                   <div>
                       {/* 作为状太或属性传props都可以 */}
                        {/* <Greeting isLogin={this.state.isLogin}/>   */}
                        <Greeting isLogin={isLogin}/>  
                        {button}
                   </div>
                  
               )
            }
        }
        return(
            <div>
               <LoginControl />
            </div>
        )
    }
}