用ts重写React官方文档里的demo（4）——条件渲染

建两个tsx：Greeting.tsx和LoginControl.tsx

// Greeting.tsx
import { State } from "./LoginControl";
import React from "react";

interface greetingProps {

}

export function UserGreeting(props: greetingProps) {
    return <h1>Welcome back!</h1>
}

export function GuestGreeting(props:greetingProps) {
    return <h1>Please sign up.</h1>
}

export function Greeting(props: State) {
    const isLoggedIn = props.isLoggedIn;
    if(isLoggedIn) {
        return <UserGreeting />
    }
    return <GuestGreeting />
}

// LoginControl.tsx
import React from 'react'
import { Greeting } from './Greeting';

export interface Props {
    onClick?: React.MouseEventHandler<HTMLButtonElement>
}

export interface State {
    isLoggedIn: boolean;
}


// 登录按钮
function LoginButton(props: Props) {
    return (
        <button onClick={props.onClick}>
            Login
        </button>
    )
}

// 登出按钮
function LogoutButton(props: Props) {
    return (
        <button onClick={props.onClick}>
            Logout
        </button>
    )
}

class LoginControl extends React.Component<Props, State> {
    constructor(props: Props) {
        super(props);
        this.handleLoginClick = this.handleLoginClick.bind(this)
        this.handleLogoutClick = this.handleLogoutClick.bind(this)
        this.state = {isLoggedIn: false}
    }

    handleLoginClick() {
        return this.setState({isLoggedIn: true})
    }

    handleLogoutClick() {
        return this.setState({isLoggedIn: false})
    }

    render() {
        const isLoggedIn = this.state.isLoggedIn;
        let button: React.ReactNode;
        if(isLoggedIn) {
            button = <LogoutButton onClick={this.handleLogoutClick} />
        } else {
            button = <LoginButton onClick={this.handleLoginClick} />
        }
        return (
            <div>
                <Greeting isLoggedIn={isLoggedIn}/> {button}
            </div>
        )
    }
}

export default LoginControl;