React render内の条件分岐

3697 ワード
React 基礎 基礎 テキストリンク

Reactでのrender内での出し分けをする条件分岐の書き方を学んだのでメモ。

三項演算子

const testBooloean = true;

{testBooloean ? <div>testBooloean === true;</div> : <div>testBooloean === false;</div>}

やってみた

&& の書き方

const testBooloean = true;

 {testBooloean && <div>testBooloean === true; </div>}

やってみた

このとき注意すること！
比較する値(今回でいうtestBooloean)には必ずBooleanの値が入るようにしなきゃいけないです。

例えば...

const arr = [];

 {arr.length && <div>test</div>}

結果

arr = [];なのになぜか「０」が表示されてしまいます。

arrの配列の中が空の場合...という条件にしたい場合は

const arr = [];

// Booleanになるようにしましょう
 {!!arr.length && <div>test</div>};

結果