SOURCE

class MailBox extends React.Component {
    constructor (props) {
        super(props)
        this.state = {
            mails: ['react', 'vue', 'weex', 'serverless']
        }
    }

    clear = () => {
        this.setState({
            mails: []
        })
    }

    render () {
        const mails = this.state.mails
        return (
            <div>
                {
                    mails.length > 0 ? (
                        <div>
                            <h2>您有 {mails.length} 封未读邮件</h2>
                            <button onClick={this.clear}>清空</button>
                        </div>
                    ) : (
                        <h2>您暂无未读邮件</h2>
                    )
                }
            </div>
        )
    }
}

ReactDOM.render(
    <MailBox/>,
    document.getElementById('app')
)

<div id="app"></div>