Reactガイドを読んでいくその63

React

これは

Reactのガイドを読んでいく記事です。

ガイドのリンク

ja.reactjs.org

JSX における props

JSX における子要素

真偽値、null、undefined は無視される

true,false,null,undefinedは子要素として渡すことができ、何もレンダーしない。

// 以下はすべて同じ結果になる
<div />

<div></div>

<div>{false}</div>

<div>{null}</div>

<div>{undefined}</div>

<div>{true}</div>

この何もレンダーしない機能は条件に応じてReact要素を表示するときなどに役立つ。

// これはpopHeaderがtrueの時にのみHeader /が表示される
<div>
  {popHeader && <Header />}
  <Content />
</div>

数値0のように疑と評価される値はReactで評価する対象となる。
なので何もレンダーされないことを期待して数値0を使用すると、期待する結果が得られないことがある。

  {props.messages.length &&
    <MessageList messages={props.messages} />
  }
</div>
<div>
  {props.messages.length > 0 &&
    <MessageList messages={props.messages} />
  }
</div>

もしfalse、true、null、または undefinedを表示したい場合は、文字列に変換する。

<div>
  My JavaScript variable is {String(myVariable)}.
</div>

明日からはパフォーマンス最適化です。

今日はここまで。