条件付きレンダリング

Logical AND (&&)

The logical AND ( && ) operator (logical conjunction) for a set of boolean operands will be true if and only if all the operands are true . Otherwise it will be false .
More generally, the operator returns the value of the first falsy operand encountered when evaluating from left to right, or the value of the last operand if they are all truthy .

論理&演算子行内でIfを表す

JSXでは大かっこ式を含めるを使用できます.JavaScriptの論理演算子&&を使用すると、簡単に条件に従ってエンティティを配置できます.

function Mailbox(props) {
  const unreadMessages = props.unreadMessages;
  return (
    <div>
      <h1>Hello!</h1>
      {unreadMessages.length > 0 && <h2>You have {unreadMessages.length} unread messages.</h2>}</div>
  );
}

const messages = ['React', 'Re: React', 'Re:Re: React'];
ReactDOM.render(
  <Mailbox unreadMessages={messages} />,
  document.getElementById('root')
);

JavaScriptでは、true && expressionは常にexpressionと評価され、false && expressionは常にfalseと評価される.
したがって、条件が&&である場合、trueの後のエンティティが出力される.条件がfalseの場合、Reactは無視されスキップされます.
false式を返す場合は、&&の後の式はスキップされますが、false式を返します.次の例では、<div>0</div>renderメソッドが返される.

シンボルのレンダリングをブロックするには

別の構成部品でレンダリングされる場合、構成部品自体を非表示にしたい場合があります.この問題は、レンダリング結果を出力する代わりにnullを返すことで解決できます.
次の例では、<WarningBanner />warnpropの値を示します.propが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')
);