React で条件付きで className 値を設定する

オンライン ショッピングの目的地が 1つしかないことにオンラインの顧客が満足していた時代は、とっくの昔に終わりました。 最近では、インターネット ユーザーがオンラインで時間を過ごすための無数のオプションがあり、顧客体験に対する彼らの期待は高まっています。

企業は、ユーザー フレンドリーな Web サイトを開発するというプレッシャーにさらされています。これは単純に見えるかもしれませんが、開発と維持には多くの作業が必要です。

React で className を条件付きで設定する

React は、Web サイト UI を開発するための一般的な JavaScript ベースのフレームワークです。 HTML のようなテンプレート言語 JSX を使用しますが、動的な機能を備えています。

JSX の最大の利点の 1つは、属性を条件付きで適用できることです。 クラスは className 属性を使用して設定されます (class は React の予約語です)。

インライン スタイルは、styles 属性を使用して設定できます。

className 属性を条件付きで設定すると、多くの点で役立ちます。 たとえば、ユーザーがダーク モードとライト モードを切り替えることができるスイッチ要素を実装できます。

className 属性の最終値を決定する条件は、state または props オブジェクトの値に依存します。 state は、テキスト フィールドやチェックボックス ボタンの値などのユーザー入力に基づいて変数を維持および更新するために使用されます。

Props オブジェクトは、親コンポーネントから子コンポーネントに渡されるデータを保持します。 props 値と className 値のいずれかを変更すると、コンポーネント全体の再レンダリングがトリガーされ、比較が実行され、className プロパティ値が更新されます。

これ以上苦労することなく、スタイルを条件付きで適用する方法を見てみましょう。

React で条件付きで className を設定するには、三項演算子を使用する

JSX では、特定の値を返す有効な JavaScript 式と等しい属性を設定できます。 たとえば、className="dark" は常に className を 'dark' に設定します。

代わりに、className 属性の値を JavaScript 式に設定して、特定の変数を評価し、className 属性の値を決定することができます。 例を見てみましょう。

export default function App() {
  const [dark, setDark] = useState(false);
  return (
    <div className={dark ? "dark" : ""}>
      <input type="checkbox" onChange={() => setDark(!dark)}></input>
      Switch to The Opposite
    </div>
  );
}

ライブデモ を自分で試すことができます。

この場合、二重中括弧を使用して className 属性を三項演算子と等しく設定します。これにより、dark 状態変数の値に応じて最終的な className 値が決まります。 true の場合、JavaScript は 'dark' 文字列を値として適用します。 そうでない場合は、何も適用されません。

dark 状態変数が true の場合は任意の X 文字列を適用し、false の場合は任意の Y 文字列を適用するように指示することもできます。

また、常に適用する必要がある className 文字列と、条件付きで適用する必要がある文字列を混在させることもできます。 見てみましょう。

export default function App() {
  const [dark, setDark] = useState(false);
  return (
    <div className={`large ${dark ? "dark" : ""}`}>
      <input type="checkbox" onChange={() => setDark(!dark)}></input>
      Switch to The Opposite
    </div>
  );
}

この場合、className 属性の値は何があっても 'large' になり、状態変数が true の場合は className 'dark' も適用されます。

テンプレート リテラル (``) は、JavaScript ES6 の最新機能です。 React は JavaScript をベースにしているため、React アプリでも使用できます。

classNames パッケージを使用して、React で条件付きで className を設定する

JavaScript コミュニティは、条件付きで className 属性に値を適用する条件を簡単に設定できる classNames パッケージを開発しました。 インストールするには、CLI で次のコマンドを入力します。

npm install classnames

次に、次のことができます。

export default function App() {
  const [dark, setDark] = useState(false);
  return (
    <div className={classNames({"large": true, "nightMode": dark})}>
      <input type="checkbox" onChange={() => setDark(!dark)}></input>
      Switch to The Opposite
    </div>
  );
}

classNames() 関数には 1つのオブジェクト引数があり、キーと値のペアは className 値とそれらを適用する条件を表します。

上記の例では、値が true に設定されているため、'large' 値が常に適用されます。 'nightMode' は、状態変数 dark が true と評価される場合にのみ、className 属性に適用されます。

clsx() 関数を使用して、React で条件付きで className を設定する

JavaScript 開発者はしばしば条件付きでクラスを適用する必要があるため、この問題に対処するために clsx() 関数も開発しました。

clsx() 関数はさまざまな方法で使用できます。 clsx() 関数を使用して className 属性を設定すると、アプリケーションがどのように見えるかを見てみましょう。

export default function App() {
  const [dark, setDark] = useState(false);
  return (
    <div className={clsx({"large": true, "nightMode": dark})}>
      <input type="checkbox" onChange={() => setDark(!dark)}></input>
      Switch to The Opposite
    </div>
  );
}

関数、それが返すもの、およびその仕組みの詳細については、公式の npm ページ をご覧ください。