React阻止組件渲染

在極少數狀況下，你可能但願能隱藏組件，即便它已經被其餘組件渲染。若要完成此操做，你可讓 render 方法直接返回 null，而不進行任何渲染。

下面的示例中，<WarningBanner /> 會根據 prop 中 warn 的值來進行條件渲染。若是 warn 的值是 false，那麼組件則不會渲染:

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

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

class Page 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(
  <Page />,
  document.getElementById('root')
);