react07_条件渲染

react 条件渲染

阻止组件渲染

在定义组件的render()方法中返回null可阻止该组件渲染

页面初始是显示警告消息的，当点击Hide后，state中的showWarning变为false，这导致警告消息组件被阻止渲染，即隐藏了警告消息

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

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

class Page2 extends React.Component {
    constructor(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>
        );
    }
}

ReactDOM.render(
    <Page2 />, 
    document.getElementById('react_test')
);