JSX ファイルでロジックを使用する

  • 1 分

JSX は、HTML と JavaScript を組み合わせたものです。 何かを表示する方法や表示するかどうかを決定するなどのロジックが必要な場合は、JavaScript を使用してください。 if...else ステートメント、case ステートメント、またはその他のブール型ロジックを使用できます。

三項演算子

ブール型ロジックをアプリケーションに挿入する場合、最も一般的な方法の 1 つは三項演算子です。 三項演算子は、1 行のコードで if...else ステートメントを簡単に作成できる方法です。 三項の構文には、3 つのコンポーネントがあります。ブール式、式が true の場合の戻り値、式が false の場合の戻り値です。

たとえば、数値が偶数または奇数の場合にメッセージを表示する場合は、次のように記述できます。

const number = 3;
console.log(number % 2 ? 'The number is odd' : 'The number is even');

式はブール値 (number % 2) で開始します。 数値が奇数の場合、ブール値 (剰余) は 1 または true になります。最初の値 (The number is odd) が返されます。 数値が偶数の場合、剰余は 0 なので、ブール値は false になります。2 番目の値 (The number is even) が返されます。 前のコードの結果として、メッセージ The number is odd が表示されます。

三項と JSX

この構文を利用して、値の表示方法を決定できます。 この値に基づいて HTML 要素の class を動的に設定する場合は、次を使用できます。

<div className={ isComplete ? 'done' : 'normal' }>{ value }</div>

Note

使用されている属性が class ではなく className であることにお気づきでしょうか。 これは、class という単語が JavaScript で予約されているためです。 ランタイムの混乱を避けるために、代わりに className を使用します。