条件付きレンダリングは、React で最も一般的に使用されるものの 1 つです。アプリケーションが大きくなり、物事が複雑になるにつれて、条件付きレンダリング ステートメントが読みにくくなる可能性があります。この記事では、React で美しい条件文を簡単に作成する方法について説明します。

一般的な条件付きレンダリング手法

これらは、React コンポーネントで条件付きレンダリングを適用するときに使用されるいくつかの手法です。

&& の使用

これは、条件付きレンダリングで最も一般的に使用される手法の 1 つです。この手法は、予測できないバグにつながる可能性があるため、慎重に使用する必要があることを覚えておくことが重要です。

If/Else ステートメントの使用

React での条件付きレンダリングのもう 1 つの手法は、if/else ステートメントを使用することです。チェックする条件が複数ある場合、コンポーネント コードが複雑になる可能性があります。

三項演算子の使用

三項演算子は、React での条件付きレンダリングに使用される一般的な手法です。三項演算子を使用する際の問題は、チェックする条件が複数ある場合に、ネストされた三項演算子が使用されることです。コードが読みにくく、複雑になる可能性があります。

きれいな条件文を書く

を紹介します。これは、React で美しい条件を記述できるシンプルで小さな React コンポーネントです。React で読み取り可能な条件付きレンダリング コードをすばやく記述できるようになります。単一の条件をテストする必要があるか、一連の条件をテストする必要があるかに関係なく、を使用してそれを行うことができます。

コンポーネントは、if/else および switch/case ステートメントと同様に機能します。React での条件付きレンダリングの一連の条件を確認できます。

上記の例では、コードは曜日に基づいてメッセージを表示します。最後の条件は常に true ですが、上記のすべての条件が満たされない場合にのみレンダリングされます。これは、switch/case defaultステートメントとまったく同じように機能します。

コンポーネントはisTrue prop を受け入れ、ネストされた条件を実装できるようにします。これは、 で渡された条件がtrue と評価された場合にのみ、すべての子条件がチェックされることを意味し

こちらの GitHub で、この小さな React コンポーネントを確認してください。

構成可能な Web アプリケーションを構築する

Web モノリスを構築しないでください。Bitを使用して、React や Node.js などのお気に入りのフレームワークで、分離されたソフトウェア コンポーネントを作成および構成します。強力で楽しい開発経験を備えた、スケーラブルでモジュラーなアプリケーションを構築します。

チームをBit Cloudに連れて行き、コンポーネントを一緒にホストして共同作業し、チームとしての開発をスピードアップ、スケーリング、および標準化します。Design SystemまたはMicro Frontendsを使用してコンポーザブル フロントエンドを試すか、サーバーサイド コンポーネントを使用してコンポーザブル バックエンドを調べてください。

やってみる →

もっと詳しく知る