【React知見】条件分岐（IF文）とそのネスト

背景

Reactを最近触り始めたのだが、
React(jsx)で条件分岐（if文）をネストする方法がよく分かってなかったのでまとめた

ifのネスト

便宜上if文で説明します。
ifの中にifがあることですね。

if (A) {
     if (b) {
     }
}

正確には「if文にネストされたif文」とかかもしれんけど、
いざこうやって言語化すると難しい。

要件

条件A、条件BといったBoolがあるとする

• Aかつ!BならばAと（ブラウザ上に）表示
• AかつBならばBと表示
• !AならばCと表示

この条件分岐を実現するにはJSXでどのような記法が使えるのか。

前提

JSXの条件分岐はこんな感じで表現できる

sample.jsx

class Sample extends React.Component {
    public render() {
        return (
            <>
                {conditionA && (
                    <p>A</p>
                )}
                {!conditionA && (
                    <p>Aじゃない</p>
                )}
            </>
        )
    }
}

もしくはシンプルにしたいので三項演算子で

sample.jsx

class Sample extends React.Component {
    public render() {
        return (
            <>
                {conditionA ? (
                    <p>A</p>
                ) : (
                    <p>Aじゃない</p>
                )}                
            </>
        )
    }
}

よくあるif~else　みたいな構文は直接かけません（後述）

記法

三項演算子入れ子パターン

こんな風に普通に入れ子にして書くのが多分一番綺麗なのかもしれません。
が、なぜかこんな風にできるのを最近まで知らなかった。

sample.jsx

class Sample extends React.Component {
    public render() {
        return (
            <>
                {conditionA ?
                    (!conditionB ?
                        (<p>A</p>) :
                        (<p>B</p>)
                    ) :
                    (<p>C</p>)
                }
            </>
        )
    }
}

ネストしないパターン

最初は結構こんな感じで書いてた。
ネストせずに普通に順番に判定していくパターン

sample.jsx

class Sample extends React.Component {
    public render() {
        return (
            <>
                {conditionA && !conditionB && (
                    <p>A</p>
                )}
                {conditionA && conditionB && (
                    <p>B</p>
                )}
                {!conditionA && (
                    <p>C</p>
                )}
            </>
        )
    }
}

関数にしちゃうパターン

無名関数生成して、関数内部で判定させちゃうパターン。
処理自体は馴染みやすいけど、括弧多くて気持ち悪い

sample.jsx

class Sample extends React.Component {
    public render() {
        return (
            <>
                {
                    (() => {
                        if (conditionA)
                            if (!conditionB)
                                return <p>A</p>
                            else
                            return <p>B</p>
                        else
                        return <p>C</p>
                    })()
                }
            </>
        )
    }
}

雑感

雑だけど締めます。
色々書き方あるけど、混ぜると混乱するので、プロジェクト毎に統一しよう。

（ああ！ネストしないのが一番見やすいッ！）