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')
);