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

import React from 'react'

interface State {
    showWarning: boolean;
}

interface Props {
    warn?: boolean;
}

function WarningBanner(props: Props) {
    if (!props.warn) {
        return null;
    }

    return (
        <div className="warning">
            Warning!
        </div>
    )
}

 class Warning extends React.Component<Props, State> {
    constructor(props:Props) {
        super(props);
        this.state = {showWarning: true};
        this.handleToggleClick = this.handleToggleClick.bind(this);
    }

    handleToggleClick() {
        this.setState(state => ({
            showWarning: !state.showWarning
        }))
    }

    render() {
        return (
            <div>
                <WarningBanner warn={this.state.showWarning} />
                <button onClick={this.handleToggleClick}>
                    {this.state.showWarning ? 'Hide' : 'Show'}
                </button>
            </div>
        )
    }
}

export default Warning;