reactのクラス名に複数の構成を追加する方法は何ですか？

2年 ago
蓮, 翼
1 minute

Reactでは、要素に複数のCSSクラスを追加するためにいくつかの方法が使えます。

  1. クラス名
const classNames = 'class1 class2 class3';
return <div className={classNames}>Hello World</div>;
  1. テンプレート文字列：複数のクラス名の文字列をES6のテンプレート文字列構文を使用して組み合わせる。例：
const class1 = 'class1';
const class2 = 'class2';
const class3 = 'class3';
const classNames = `${class1} ${class2} ${class3}`;
return <div className={classNames}>Hello World</div>;
  1. クラス名
const classNames = ['class1', 'class2', 'class3'];
return <div className={classNames.join(' ')}>Hello World</div>;
  1. クラス名
  2. クラス名
import classNames from 'classnames';
const class1 = 'class1';
const class2 = 'class2';
const class3 = 'class3';
const classNames = classNames(class1, class2, class3);
return <div className={classNames}>Hello World</div>;

いくつかの一般的な方法で複数のCSSクラス名を設定することができます。具体的な要件やプロジェクトの状況に応じて、適切な方法を選択してクラス名を処理することができます。

bannerAds