BeginnerEngineerBlog
ホーム よく読まれている記事一覧
中の人
中の人

【react】jsxでの条件分岐

公開: 2023-05-23 22:32
更新: 2023-05-24 02:10
308
react jsx 条件分岐 短絡評価 三項演算子
よく忘れるのでメモ
【広告】
【スミジョブ】住み込みのお仕事に特化した求人情報サイト
知識ゼロで始める自分だけのSNS『Xserver SNS』
【特別なお客様向け】Rakuten最強プランのお申し込みで楽天ポイントプレゼントキャンペーン | 通信・エリア | 楽天モバイル

こんにちはー

中の人です

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
通信エラーが発生しました。
【広告】
【広告】
日本最大級のまなびのマーケット
指示するだけでトランクルームから荷物を配送できる宅トラ
タオルブランド OSTD plus【公式】- グッドデザイン賞受賞のタオルショップ
似たような記事