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

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

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 に対応するのに便利です。ここで、クラスをそれぞれ redblue に設定します。

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

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

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

出力:

テンプレートリテラル出力を使用して複数の className を追加する

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

Oluwafisayo Oluwatayo avatar Oluwafisayo Oluwatayo avatar

Fisayo is a tech expert and enthusiast who loves to solve problems, seek new challenges and aim to spread the knowledge of what she has learned across the globe.

LinkedIn

関連記事 - React Component