JavaScript、CSS、Twitter Bootstrap 3 での条件付きクラス属性

2024-04-02

Reactで条件付きにクラス属性を適用する

三項演算子

最も簡単な方法は、三項演算子を使用することです。

const className = condition ? "class1" : "class2";

<div className={className}>
  ...
</div>

この例では、condition が true の場合は class1 が、false の場合は class2 が className 変数に割り当てられます。

&& 演算子を使用して、条件付きにクラス属性を適用することもできます。

<div className="base-class"
     {condition && " additional-class"}>
  ...
</div>

テンプレートリテラルを使用して、動的にクラス属性を生成することもできます。

const className = `class1 ${condition && "class2"}`;

<div className={className}>
  ...
</div>

ライブラリの使用

import classnames from "classnames";

const className = classnames("base-class", {
  "additional-class": condition
});

<div className={className}>
  ...
</div>

Twitter Bootstrap 3 を使用している場合は、Bootstrap.css ファイルに定義されているクラスを使用できます。

<div className="col-md-4">
  ...
</div>

この例では、col-md-4 クラスを使用して、要素を 4 つの等幅列に分割します。

React で条件付きにクラス属性を適用するには、いくつかの方法があります。どの方法を使用するかは、要件と好みによって異なります。

補足

上記の例では、condition は true または false の値を持つ変数です。
条件付きに適用するクラス属性は、コンポーネントの props から取得することもできます。

import React, { useState } from "react";
import classnames from "classnames";

const App = () => {
  const [condition, setCondition] = useState(true);

  const handleClick = () => {
    setCondition(!condition);
  };

  return (
    <div>
      <button onClick={handleClick}>条件を切り替える</button>
      <div
        className={classnames("base-class", {
          "additional-class": condition
        })}
      >
        コンポーネントの内容
      </div>
    </div>
  );
};

export default App;

useState フックを使用して、condition 変数とそれを更新するための setCondition 関数を初期化します。
handleClick 関数は、condition 変数の値を反転します。
classnames ライブラリを使用して、base-class クラスと condition 変数の値が true の場合のみ追加される additional-class クラスを組み合わせて className 属性を生成します。

このコードを実行すると、ボタンをクリックするたびに additional-class クラスの有無が切り替わります。

特定の条件が満たされた場合のみ、要素を表示する。

条件付きにクラス属性を適用することは、React でコンポーネントの外観を動的に制御する強力な方法です。

条件付きにクラス属性を適用するその他の方法

switch ステートメント

const className = condition ? "class1" : "class2";

switch (condition) {
  case "case1":
    className = "class1";
    break;
  case "case2":
    className = "class2";
    break;
  default:
    className = "";
}

<div className={className}>
  ...
</div>

この例では、condition の値に基づいて className 変数に適切なクラスが割り当てられます。

オブジェクトリテラル

const classes = {
  "class1": condition1,
  "class2": condition2
};

const className = Object.keys(classes).filter(className => classes[className]).join(" ");

<div className={className}>
  ...
</div>

この例では、classes オブジェクトを使用して、条件に基づいて適用されるクラスのリストを定義します。

カスタムフック

条件付きにクラス属性を適用するロジックを再利用したい場合は、カスタムフックを作成できます。

const useClassNames = (conditions) => {
  const className = Object.keys(conditions).filter(className => conditions[className]).join(" ");

  return className;
};

const App = () => {
  const condition1 = true;
  const condition2 = false;

  const className = useClassNames({
    "class1": condition1,
    "class2": condition2
  });

  return (
    <div className={className}>
      ...
    </div>
  );
};

Higher-Order Component (HOC)

const withClassNames = (Component) => {
  return (props) => {
    const conditions = props.conditions;
    const className = Object.keys(conditions).filter(className => conditions[className]).join(" ");

    return (
      <Component
        {...props}
        className={className}
      />
    );
  };
};

const App = () => {
  const condition1 = true;
  const condition2 = false;

  return (
    <div>
      <WithClassNames
        conditions={{
          "class1": condition1,
          "class2": condition2
        }}
      >
        <Component />
      </WithClassNames>
    </div>
  );
};