React で className 値を動的に適用する

1. React で動的な className 値を設定する
2. ネイティブ JavaScript を使用して React で動的な className 値を設定する
3. 文字列リテラル (ES6) を使用して React で動的な className 値を設定する

現代のユーザーは、顧客体験に関して高い期待を寄せています。 彼らは、ダークモードや自分の行動に反応する直感的なインターフェースなどの機能を望んでいます。

Web 開発者は、これらの機能を実装するために、ユーザーのアクションに応じてクラスとスタイルを動的に更新する方法を見つける必要があります。

className 属性には、高度なアプリケーションとコンテナーの複数の値が含まれます。 className に複数の値を設定したいが、className 値の 1つだけが動的である場合は、さまざまな方法でそれを行うことができます。

React で動的な className 値を設定する

React では、className 属性を使用してクラスを要素に追加します。 複雑な Web アプリケーションを構築する場合、className 属性には複数の値が含まれます。

React アプリケーションを構築するとき、return ステートメント内で JavaScript 式を使用できるテンプレート言語 JSX を使用します。 JavaScript の式を中かっこ {} で囲むだけで、これらの大かっこの間のすべてが評価されます。

className 属性には複数の値を設定できます。 一定のものもあれば、動的に適用されるものもあります。

React でそれを行う具体的な方法を探ってみましょう。

ネイティブ JavaScript を使用して React で動的な className 値を設定する

動的な className 値を追加する最も簡単な方法は、中括弧を組み合わせて className 属性を状態変数と等しく設定することです。 これは、JavaScript のすべてのバージョンで利用できる非常に単純な機能です。

例：

export default function App() {
    const [border, setBorder] = useState("blackBorder");
    return (
        <div className={"App " + border}>
            <h1>Hello CodeSandbox</h1>
            <input type="text" onChange={(e) => setBorder(e.target.value)}></input>
        </div>
    );
}

この例では、useState() フックを使用して border 状態変数のデフォルト値を blackBorder に設定しました。 CSS では、blackBorder クラス ルールを定義しました。これは、2 ピクセルの黒の境界線を任意のコンテナーに適用します。

return ステートメント内で、{} 中括弧構文を使用して、2つの className 値を取得しました。 App クラスは一定ですが、2 番目の className 値は border 状態変数の値に依存します。

テキスト入力を実装して、ユーザーが任意の className を入力できるようにすることができます。これにより、貴重な border の値が更新されます。 デモ を自分でチェックして、次のいずれかの値を入力します: greenBorder、blackBorder、redBorder と何が起こるかを確認してください。

文字列リテラル (ES6) を使用して React で動的な className 値を設定する

または、文字列リテラルとも呼ばれるバッククォートを使用して、className 属性の動的な値を定義することもできます。

例：

export default function App() {
    const [border, setBorder] = useState("blackBorder");
    return (
        <div className={`App ${border}`}>
            <h1>Hello CodeSandbox</h1>
            <input type="text" onChange={(e) => setBorder(e.target.value)}></input>
        </div>
    );
}

この構文ははるかに読みやすいです。 中括弧の二重使用に注意してください。

外側のペアは、中括弧の間に JavaScript 式があることを JSX が理解するために必要です。

バッククォートを使用する場合、ドル記号は変数への参照を示します。 たとえば、${someVariable} と記述した場合、JavaScript は変数の現在の値を調べることを認識します。

それ以外は、すべて以前と同じです。