JSX ファイルでロジックを使用する
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
を使用します。