React で三項演算子を使用する

1. React で三項演算子を使用する
2. JSX で三項演算子を使用する

React は、基本的な HTML Web サイトよりも多くの機能を備えたユーザー インターフェイスを構築するために使用されるフレームワークですが、CSS スタイルを使用して要素の外観を変更することも可能です。

特に、三項演算子を使用して動的な値を生成できます。

React で三項演算子を使用する

React アプリケーションは、通常、JSX と呼ばれるテンプレート言語で記述されます。 多くの点で HTML に似ていますが、より多くの機能を提供します。

JSX 内では、React 開発者が条件を設定する方法が複数あります。 if/else または switch ステートメントを使用できますが、3つ目の方法は三項演算子です。

三項演算子は、条件を設定し、true または false に基づいて特定の値を返す非常に簡単な方法です。 これにより、動的クラスを設定したり、動的インライン スタイルを適用したり、文字列値を条件付きでレンダリングしたりできます。

三項演算子を使用して、カスタム機能をアプリケーションに追加することもできます。

React で return ステートメントの外で三項演算子を使用する

React は JavaScript ベースのフレームワークであるため、通常の JavaScript を return ステートメントの外で使用できます。 if/else や switch など、任意の条件をここで設定できます。

この例では、三項演算子を使用して className 属性の動的な値を生成します。 文字列があり、別の文字列である三項演算子の結果を追加します。

例：

export default function App() {
    const [night, setNight] = useState(true);
    const classNames = "base " + night ? "nightmode" : "";
    return (
        <div className={classNames}>
            <h1>Hello, World</h1>
        </div>
    );
}

この例では、三項演算子を使用して、<div> コンテナのクラス名を条件付きで生成しました。 このライブデモ で App コンポーネントの外観を確認できます。

classNames 変数の最終的な値は、night 状態変数の値に依存します。 デフォルトでは、night 変数の値を true に設定します。

setNight() 関数を使用してその値を変更しない限り、三項演算子は 'nightmode' 文字列値を返します。

JSX で三項演算子を使用する

JSX は、React アプリケーションを構築するためのデフォルトのテンプレート言語です。 JSX 内で中括弧を使用し、それらの間に有効な JavaScript 式 (三項演算子を含む) を記述できます。

三項演算子を使用して、React で動的クラスを構成できます。 これは短くて単純な構文です。

最初に、true または false を評価する JavaScript 式を記述し、その後に疑問符を付ける必要があります。

その後、コロンで区切られた 2つの値が表示されます。 条件が true の場合は 1つ目が返され、false の場合は 2つ目が返されます。

例：

export default function App() {
    const [night, setNight] = useState(true);
    return (
        <div className={"base " + night ? "nightmode" : ""}>
            <h1>Hello, World</h1>
        </div>
    );
}

このようにして、動的な値をインラインで生成できます。 三項演算子を使用して、テキストを動的にレンダリングすることもできます。 たとえば、エラーが発生したときにエラー テキストを出力します。

例：

export default function App() {
    const [night, setNight] = useState(true);
    const [error, setError] = useState(false);
    const classNames = "base" + night ? "nightmode" : "";
    const handleInputChange = (data) => {
        if (data.indexOf("@") == true) {
            return null;
        } else {
            setError(true);
        }
    };
    return (
        <div>
            <div className={classNames}>
                <h1>Hello, World</h1>
            </div>
            Enter your email address:
            <input onChange={(e) => handleInputChange(e.target.value)}></input>
            <p style={{ color: error ? "red" : "black" }}>
                {error ? "please enter a valid email address" : "Everything is fine"}
            </p>
        </div>
    );
}

ここでは、ユーザーに電子メール アドレスを入力するように求め、非常に簡単な検証を実行して、入力内容が電子メール アドレスの一般的なパターンと一致していることを確認します。

まず、<input> 要素を作成し、onChange イベントをリッスンして handleInputChange() イベント ハンドラーを呼び出します。 テキスト入力要素に入力したものはすべて、引数としてイベント ハンドラーに渡されます。

イベント ハンドラーでは、単純な if/else ステートメントを使用して、ユーザーから提供された値を確認しました。 @記号が含まれている場合、値はテストに合格し、有効な電子メール アドレスであると見なすことができます。

そうでない場合は、setError 関数を使用してアラームを発生させます。

error 状態変数を使用しました。これは、ユーザーに警告する必要があるかどうかを示すブール値です。 この状態変数の値を更新するために使用される setError 関数も定義しました。

最後に、三項演算子を使用して、有効な電子メール アドレスの入力についてユーザーに警告するテキストを表示する必要があるかどうかを確認しました。 error 状態変数が true の場合、三項演算子は警告メッセージを返します。 そうでない場合は、'Everything is fine' という文字列を返します。

また、UX に追加の利点があるという警告メッセージが含まれている場合は、条件付きでテキストを赤くするスタイルを適用します。 それ以外の場合は、デフォルトの黒色のままです。