BeginnerEngineerBlog
中の人
中の人

【react】jsxでの条件分岐

公開: 2023-05-23 22:32
更新: 2023-05-24 02:10
306
react jsx 条件分岐 短絡評価 三項演算子
よく忘れるのでメモ

こんにちはー

中の人です

jsx内での条件分岐で毎回ネット漁って調べるので個人的なメモとして紹介します

(紹介するコードはこちらで使用したコードを利用しています)


短絡評価(&&)


毎回「jsx && 条件分岐」みたいなキーワードで検索していたのですが、「短絡評価」と言うそうです。初めて知りました。(さすがchat_gpt!)

    const one = true; // 👈
    return (
        <div className="App" style={app_style}>
            // 👇
            {
                one && <>こんちは</>
            }
            <div style={{textAlign: 'left'}}>react</div>
            <QuillToolbar
            />
            <ReactQuill
                theme="snow"
                value={value}
                onChange={setValue}
                modules={modules}
                formats={formats}
                scrollingContainer={'html'}
            />
        </div>
    );

oneがtrueなら


こうなります。

    const one = false;// 👈
    return (
        <div className="App" style={app_style}>
            // 👇
            {
                one && <>こんちは</>
            }
            <div style={{textAlign: 'left'}}>react</div>
            <QuillToolbar
            />
            <ReactQuill
                theme="snow"
                value={value}
                onChange={setValue}
                modules={modules}
                formats={formats}
                scrollingContainer={'html'}
            />
        </div>
    );

oneがfalseなら


こうなります

trueの場合のみ「&&」以降が実行?出力されます

ちなみに

    const one = true; // 👈
    const two = true; // 👈
    return (
        <div className="App" style={app_style}>
            // 👇
            {
                one && two && <>こんちは</>
            }
            <div style={{textAlign: 'left'}}>react</div>
            <QuillToolbar
            />
            <ReactQuill
                theme="snow"
                value={value}
                onChange={setValue}
                modules={modules}
                formats={formats}
                scrollingContainer={'html'}
            />
        </div>
    );

これは


こうなって

    const one = true; // 👈
    const two = false; // 👈
    return (
        <div className="App" style={app_style}>
            // 👇
            {
                one && two && <>こんちは</>
            }
            <div style={{textAlign: 'left'}}>react</div>
            <QuillToolbar
            />
            <ReactQuill
                theme="snow"
                value={value}
                onChange={setValue}
                modules={modules}
                formats={formats}
                scrollingContainer={'html'}
            />
        </div>
    );

これは


こうなります。

へー(゚∀゚ )


三項演算子(true|false ? '' : '')



    const one = true;// 👈
    return (
        <div className="App" style={app_style}>
            // 👇
            {
                one ? (<>おすー</>) : (<>おすおす</>)
            }
            <div style={{textAlign: 'left'}}>react</div>
            <QuillToolbar
            />
            <ReactQuill
                theme="snow"
                value={value}
                onChange={setValue}
                modules={modules}
                formats={formats}
                scrollingContainer={'html'}
            />
        </div>
    );

これは


こうなって

    const one = false;// 👈
    return (
        <div className="App" style={app_style}>
            // 👇
            {
                one ? (<>おすー</>) : (<>おすおす</>)
            }
            <div style={{textAlign: 'left'}}>react</div>
            <QuillToolbar
            />
            <ReactQuill
                theme="snow"
                value={value}
                onChange={setValue}
                modules={modules}
                formats={formats}
                scrollingContainer={'html'}
            />
        </div>
    );

これは


こうなります

ちなみに

    const one = true;// 👈
    const two = true;// 👈
    return (
        <div className="App" style={app_style}>
            // 👇
            {
                one && two ? (<>おすー</>) : (<>おすおす</>)
            }
            <div style={{textAlign: 'left'}}>react</div>
            <QuillToolbar
            />
            <ReactQuill
                theme="snow"
                value={value}
                onChange={setValue}
                modules={modules}
                formats={formats}
                scrollingContainer={'html'}
            />
        </div>
    );

これは


こうなって

    const one = true;// 👈
    const two = false;// 👈
    return (
        <div className="App" style={app_style}>
            // 👇
            {
                one && two ? (<>おすー</>) : (<>おすおす</>)
            }
            <div style={{textAlign: 'left'}}>react</div>
            <QuillToolbar
            />
            <ReactQuill
                theme="snow"
                value={value}
                onChange={setValue}
                modules={modules}
                formats={formats}
                scrollingContainer={'html'}
            />
        </div>
    );

これは


こうなります

おすー(゚∀゚ )


終わりに


react触り始めた当初は即時関数なるもの

{(() => {
    if (true) {
        return (
            <>おすおす様です</>
        );
    }
})()}

これすごく使ってました。
スマートではないかもしれませんが、これもすごく便利。

スマートに実装するなら、短絡評価、三項演算子が多分おすすめだと思います。

おつー
0
0
0
0
通信エラーが発生しました。
【広告】
似たような記事