SOURCE

class Greeting extends React.Component {
    constructor (props) {
        super(props)
    }

    render () {
        return (
            <div>
                {this.props.isLogin ? (<h2>你好，欢迎光临！</h2>) : (<h2>请登录</h2>)}
            </div>
        )
    }
}

class LoginControl extends React.Component {
    constructor (props) {
        super(props)
        this.state = {
            isLogin: false
        }
    }

    // 登录
    handleLoginIn = () => {
        this.setState({ isLogin: true })
    }

    // 退出
    handleLoginOut = () => {
        this.setState({ isLogin: false })
    }

    render () {
        const isLogin = this.state.isLogin
        return (
            <div>
                <Greeting isLogin={isLogin}/>
                {
                    isLogin ?
                    (<button onClick={this.handleLoginOut}>退出</button>) :
                    (<button onClick={this.handleLoginIn}>登录</button>)
                }
            </div>
        )
    }
}

ReactDOM.render(
    <LoginControl/>,
    document.getElementById('root')
)

<div id="root">
    <!-- This element's contents will be replaced with your component. -->
</div>