React で条件付きスタイルを適用する

1. React の条件付きスタイル
2. React で条件付きクラスを適用する

React は、美しくレスポンシブな UI を自由に構築できるため、人気のあるフロントエンド フレームワークです。 スタイリングは、このプロセスの最も重要な側面の 1つです。

この記事では、React で条件付きスタイルを適用する複数の方法を示したいと思います。

React の条件付きスタイル

このライブラリを使用すると、ユーザー入力を値として保存し、ユーザーの全体的なアクションと入力に応じて条件付きスタイルを適用できます。

JSX でインライン条件付きスタイルを適用する

最初の明らかな方法は、インライン スタイルを定義することです。 HTML とは異なり、JSX のインライン スタイルは有効な JavaScript です。

このため、三項演算子を自由に使用して条件を設定し、特定のスタイルの値を決定することができます。 たとえば、次のことができます。

export default function App() {
  let danger = true;
  return (<div className = 'App'><h1 style = {
    {
      color: danger ? 'red' : 'green'
    }
  }>Some Text</h1>
    </div>);
}

これは次のように変換されます: danger 変数の値が true の場合、color CSS プロパティの値は red でなければなりません。 そうでない場合は、緑になります。

スタイル オブジェクトは、JSX の内側だけでなく、JSX の外側でも定義できます。 コンポーネントを呼び出すときにスタイルを直接適用する場合は、二重中括弧を使用する必要があります。

その中のコンテンツが JavaScript 式であることを JSX に伝えるために、中括弧の最初のペアが必要です。 JavaScript のオブジェクトの開始タグと終了タグとして 2 番目のペアが必要です。

JSX の外部で style オブジェクトを定義し、JSX でのみ参照する方法は次のとおりです。

export default function App() {
  let danger = true;
  let inlineStyle = { color: danger ? "red" : "green" };
  return (
    <div className="App">
      <h1 style={inlineStyle}>Some Text</h1>
    </div>
  );
}

これは、インライン スタイルを定義するためのより読みやすいアプローチです。 CodeSandbox に移動して、ライブ デモを確認します。

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

一部の人々は、インライン スタイルよりもクラスを適用することを好みます。 原理は同じです。

三項演算子を使用して動的クラス名を生成します。 さらに進んで、次の 3つのオプションを指定できます。

export default function App() {
  let danger = false
  let warning = true
  return (
    <div className="App">
      <h1 className={danger? 'dangerText': warning ? : 'warningText' : 'regularText'}>Some Text</h1>
    </div>
  );
}

この場合、danger 変数が true かどうかを確認します。

そうであれば、dangerText クラスを適用します。 そうでない場合は、warning 変数が true かどうかを再度確認します。

そうであれば、warningText クラスを適用します。 そうでない場合は、regularText を適用します。

className 属性を使用して JSX の要素にクラスを適用することに注意してください。

インライン スタイルの代わりにクラスを条件付きで適用すると、CSS を使用して要素の外観をより自由にカスタマイズできます。

テンプレート リテラルを使用して React でクラスを条件付きで適用する

テンプレート リテラルを使用して、変数の値をクラス名として適用することもできます。 その後、変数の値を動的に変更できます。

静的クラス名と動的クラス名を組み合わせることもできます。 例を見てみましょう：

export default function App() {
  let danger = false
  let warning = true
  return (
    <div className="App">
      <h1 classNamme={`large ${errorNotification}`}>Some Text</h1>
    </div>
  );
}

errorNotification 変数に値 warning が含まれている場合、className 属性には large と warning の 2つの値が含まれます。

classnames パッケージを使用して React でクラスを条件付きで適用する

最後に、多くの人が classnames と呼ばれる外部パッケージを使用して、React でクラスを動的に適用しています。

classnames() 関数は、潜在的なクラス名を持つオブジェクトをプロパティとして受け入れ、それらを値として適用するための条件を受け入れます。 見てみましょう：

export default function App() {
  let danger = false
  let warning = true
  return (
    <div className="App">
      <h1 className={classNames({warningText: error})}>Some Text</h1>
    </div>
  );
}

パッケージの機能の詳細については、公式ドキュメント を参照してください。