React学习笔记（八）元素变量

//元素变量
//登陆
function LoginButton(props) {
    return(
        onClick={props.onClick}>
            Login
        
    )
}
//注销
function LogoutButton(props) {
    return(
        onClick={props.onClick}>
            Logout
        
    )
}
//创建一个名为LoginControl的有状态组件
class LoginControl extends React.Component{
    constructor(props){
        super(props)
        this.handleLoginClick = this.handleLoginClick.bind(this)
        this.handleLogoutClick = this.handleLogoutClick.bind(this)
        this.state = {isLoggedIn:false}
    }
    handleLoginClick(){
        this.setState({isLoggedIn:true})
    }
    handleLogoutClick(){
        this.setState({isLoggedIn:false})
    }
    render(){
        const isLoggedIn = this.state.isLoggedIn

        let button = null
        if(isLoggedIn){
            button = onClick={this.handleLogoutClick}/>
        }else {
            button = onClick={this.handleLoginClick}/>
        }

        return(
            

                isLoggedIn={isLoggedIn}/>
                {button}
            
        )
    }
}
ReactDOM.render(
    ,
    document.getElementById('login')
)