登入登出功能实现（条件渲染）

登入登出功能实现（条件渲染）

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
class LoginControl extends React.Component {
    constructor(props) {
        super(props);
        this.state={isToggleOn:false}
        this.handleClick = this.handleClick.bind(this);
    }
    handleClick(e) {
        this.setState(prevState =>({isToggleOn:!prevState.isToggleOn}));
     /*   this.setState({
            isToggleOn: true
        });*/
    }
    render() {
        const isToggleOn =this.state.isToggleOn
        let showContent= ""
        if(isToggleOn) {
            showContent = '欢迎登入'
        }else{ showContent = '尚未登入'}
        return (
            <div>
                <h1 isToggleOn ={this.state.isToggleOn}>{showContent}</h1>
                <button onClick={this.handleClick}>
                    {this.state.isToggleOn ? 'Logout' : 'Login'}
                </button>
            </div>
        );
    }
}
ReactDOM.render(
    <LoginControl />,
    document.getElementById('root')
);