BeginnerEngineerBlog
ホーム いいねが多い記事一覧
中の人
中の人

【react】jsxでの条件分岐

公開: 2023-05-23 22:32
更新: 2023-05-24 02:10
350
react jsx 条件分岐 短絡評価 三項演算子
よく忘れるのでメモ
【広告】
【スミジョブ】住み込みのお仕事に特化した求人情報サイト
筋肉食堂から宅食サービス開始！【筋肉食堂DELI】
Web食いオンラインスクール公式サイトはこちら

こんにちはー

中の人です

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 (
            <>おすおす様です</>
        );
    }
})()}

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

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

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