React コンポーネントに複数の className を追加する

1. テンプレートリテラルメソッドを使用して、React コンポーネントに複数の classNames を追加する
2. classnames パッケージを使用して、React コンポーネントに複数の classNames を追加する
3. classnames パッケージと .map メソッドを使用して、React コンポーネントに複数の classNames を追加する
4. まとめ

React の classNames は、JavaScript のクラスと同じ機能を実行します。class は React の予約語であるため、クラスの代わりに使用されます。

コンポーネントに複数の classNames を追加すると、そのコンポーネントにいくつかの条件を設定する余地があります。1つの className を使用してスタイルを設定します。もう 1つは、条件を設定するために使用されます。

これは、ボタンのある Web ページを作成する場合に理想的です。

さらに、特定の状況で元のスタイルを上書きするために、コンポーネントにスタイルを追加したい場合があります。className を追加すると、これをスムーズに行うことができます。

さらに、複数の classNames を使用してスタイルを設定すると、単一の className があまりにも多くのスタイルで過負荷になる可能性があるため、CSS ファイルの読み取り、追跡、調整が容易になります。また、複数の CSS クラスが同様の属性を持っている状況では、修正とアドオンを容易にするために、同様の属性に対して別のクラスを作成する必要があります。

コンポーネントに複数の classNames を追加するさまざまな方法を見てみましょう。

テンプレートリテラルメソッドを使用して、React コンポーネントに複数の classNames を追加する

テンプレートリテラルは、テンプレート文字列とも呼ばれ、ユーザーはバッククォートで囲まれた複数の式を作成および操作し、その後に $ 記号と中括弧を付けることができます。

CSS スタイルを使用して複数の classNames の効果を示すボタン Web ページの例を作成します。プロジェクトフォルダーの App.js ファイルに移動し、次のコードを記述します。

コードスニペット-App.js：

import React from "react";
import "./App.css";
export default function App() {
  const [classNames, setClassNames] = React.useState(``);
  const [showRed, setShowRed] = React.useState(false);
  const [showBlue, setShowBlue] = React.useState(false);
  React.useEffect(() => {
    setClassNames(`${showRed ? "red" : ""} ${showBlue ? "blue" : ""}`);
  }, [showRed, showBlue]);
  return (
    <div>
      <button onClick={() => setShowRed(showRed => !showRed)}>
        Toggle Red
      </button>
      <button onClick={() => setShowBlue(showBlue => !showBlue)}>
        Toggle Light Blue
      </button>
      <div className={classNames}>hit me!</div>
    </div>
  );
}

テンプレートリテラルは、setClassNames 関数を呼び出すときに classNames に対応するのに便利です。ここで、クラスをそれぞれ red と blue に設定します。

次に、App.css ファイル内で少しコーディングを行います。

コードスニペット-App.css：

.red {
  color: red;
}.blue {
  background-color: lightblue;
  width: 50px;
}

出力：

button onClick イベントリスナーを使用して、いずれかのボタンが押されたときに React に何をするかを指示しました。ボタンの 1つを押すと、一方の className がアクティブになり、もう一方のボタンを押すと、もう一方の className が呼び出され、色が変わります。

classnames パッケージを使用して、React コンポーネントに複数の classNames を追加する

React が広く受け入れられている理由の 1つは、依存関係パッケージのおかげで、潜在的な開発や調整の余地が無制限にあるためです。

classnames パッケージは、コンポーネントに複数の classNames を追加するために適用できるもう 1つのメソッドです。これは、テンプレートリテラルメソッドよりも少ないコードを記述するのに役立ち、3つ以上の classNames を処理する場合に適しています。

プロジェクトフォルダを作成したら、内部にあるプロジェクトフォルダに移動し、次のコマンドを使用して classnames パッケージをインストールします。

npm install classnames

次に、App.js ファイルから始めてコーディングを開始します。

最初の例と同じスタイルを使用しています。ここでは CSS スニペットを繰り返しません。

コードスニペット-App.js：

import React from "react";
import "./App.css";
const classNames = require("classnames");

export default function App() {
  const [showRed, setShowRed] = React.useState(false);
  const [showBlue, setShowBlue] = React.useState(false); return (
    <div>
      <button onClick={() => setShowRed(showRed => !showRed)}>
        Toggle Red
      </button>
      <button onClick={() => setShowBlue(showBlue => !showBlue)}>
        Toggle Light Blue
      </button>
      <div className={classNames({ red: showRed, blue: showBlue })}>
        hello
      </div>
    </div>
  );
}

出力：

classnames パッケージが適用され、div にラップされます。ここで、各コンポーネントに classNames を設定し、onClick イベントリスナーを使用して各クラスの状態を変更します。

クラスに割り当てられたボタンのいずれかをクリックすると、各 className のオン/オフが切り替わることがわかります。

classnames パッケージと .map メソッドを使用して、React コンポーネントに複数の classNames を追加する

同じスタイルを複数のクラスに同時に適用する場合は、.map メソッドと一緒に classnames パッケージを使用できます。 .map メソッドは、類似した要素間で関数を実行するのに役立つ JavaScript 関数です。

プロジェクトフォルダを作成したら、内部にあるプロジェクトフォルダに移動し、次のコマンドを使用して classnames パッケージをインストールします。

npm install classnames

次に、コーディングに進みます。まず、App.js ファイルを使用します。

コードスニペット-App.js：

import React from "react";
import "./App.css";
const classNames = require("classnames");

export default function App() {
  const [showRed, setShowRed] = React.useState(false);
  return (
    <div>
      {["foo", "bar", "baz"].map(buttonType => (
        <button
          className={classNames({ [`btn-${buttonType}`]: showRed })}
          onClick={() => setShowRed(showRed => !showRed)}
        >
          Button {buttonType}
        </button>
      ))}
    </div>
  );
}

classNames を宣言した後、.map 関数は 3つのクラスすべてを buttonType オブジェクトにマップします。これにより、同じ関数を複数のクラスに渡すことができます。

次に、App.css は次のようになります。

.btn-foo,
.btn-bar,
.btn-baz {
  color: red;
}

出力：

すべてのクラスに同じ色を割り当て、ボタンを切り替えると、onClick イベントリスナーがこの CSS 関数をアクティブにしました。

まとめ

React で複数のクラスを操作すると、さまざまな組み合わせを試すことができるため、障害を回避するさまざまな方法があります。また、コンポーネント内で複数のスタイリングと条件を実行できるため、コーディングがはるかに柔軟になり、バグや間違いを正確に検出できます。