React, JSX で条件分岐(If)やループ(For)を使う方法

ReactコンポーネントのJSXで条件分岐やループを使いたい

ReactコンポーネントをJSXで書いて切るときに、条件分岐やループを使いたくなります。VueやAngularなどでは属性を使ってうまく書くことができますが、JSXでは直接IF文やFor文を使うことができません。

ここでは特定の条件でのみ要素を表示したり、複数の要素をまとめて表示するための方法をまとめます。

条件分岐

JSX内インラインで条件分岐をするには、次のように書きます。

<div>
    { flag && <p>trueの場合</p> }
    { !flag && <p>falseの場合</p> }
</div>

JSX内にはJavascriptの式を埋め込むことができます。ブール値、Null、および未定義は無視されるので、上記のような条件式を書いてやると、左辺のブール値は無視され、右辺の内容が出力されます。もちろん短絡評価の為、左辺がfalseの場合には、右辺が出力されることはありません。

三項演算子を使った書き方も有効です。

<div>
    { flag ? <p>trueの場合</p> : <p>falseの場合</p> }
</div>

繰り返し

JSXにはJavascritpの式が埋め込めますが、文をそのまま書くことはできません。したがって、ループをインラインで埋め込むには、配列に map 関数を適応する必要があります。

例えばある配列の要素をリストとして出力する例です。

<ul>
    { [1,2,3,4,5].map((value) => <li>{value}</li>)}
</ul>

即時関数を埋め込む

上記の条件分岐や繰り返しの処理は、インラインで埋め込むことができていますが、複雑な処理が書きにくいです。別の方法として、即時関数を使うことも可能です。

<div>
    {(() => {
        const flag = true;
        if (flag === true) {
            return <p>trueの場合</p>;
        }
        return false;
    })()}

    {(() => {
        const items = [];
        for (let i = 0; i < 5; i++) {
            items.push(<li>{i}</li>)
        }
        return <ul>{items}</ul>;
    })()}
</div>

それぞれ条件分岐と繰り返しを即時関数の中で実行し、その戻り値のJSXを表示します。

見てわかる通り、即時関数の仕様は可読性を損ないます。利用は控えた方がいいでしょう。もし利用するなら、別コンポーネントに分離するか、別の関数として切り出すという選択肢を考慮に入れるべきだと思います。

以上。

参考URL

• JSX In Depth – React