テンプレート リテラルを使用して ReactJS コンポーネントに複数のクラスを追加する方法

テンプレート リテラルを使用した ReactJS コンポーネントへの複数のクラスの追加

ReactJS のコンポーネントに複数のクラスを追加するには、ES6 テンプレート リテラルを利用できます。このメソッドは、文字列と変数を 1 つの式に組み合わせるための簡潔かつ効率的な方法を提供します。

ステップ 1: クラス変数を定義する

コンポーネントの render メソッド内で、追加するクラスを格納する変数。例:

const activeClass = this.state.focused === index ? 'active' : '';

この変数は、コンポーネントの状態に基づいて条件付きで「アクティブ」クラスを設定します。

ステップ 2: テンプレート リテラルを使用してクラスを結合します

テンプレート リテラルを使用すると、バッククォート (`) を使用して複数行の文字列を作成できます。文字列内に、${} 構文を使用してクラス変数を埋め込みます。

const classes = `${activeClass} data.class main-class`;

この行は、'activeClass'、'data.class'、および 'main-class' 変数を 1 つの文字列に連結します。

ステップ 3: className 属性に割り当てる

JSX 要素で、「classes」変数を「className」属性に割り当てます。これにより、要素にすべてのクラスが適用されます。

<li key={index} className={classes}>...</li>

ワンライナー ソリューション

ワンライナー バージョンを使用すると、これらの手順を 1 行に組み合わせることができます。 :

const classes = `form-control round-lg ${this.state.valid ? '' : 'error'}`;

ここで、'this.state.valid' は、条件付きで 'error' クラスを追加する状態変数です。

以上がテンプレート リテラルを使用して ReactJS コンポーネントに複数のクラスを追加する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。