ReactJS コンポーネントの className 属性に複数のクラスを追加するにはどうすればよいですか?

ReactJS コンポーネントの複数のクラス: 詳細なソリューション

ReactJS および JSX を使用する場合、コンポーネントの className 属性に複数のクラスを追加できます。共通のタスク。この記事では、ES6 テンプレート リテラルを使用してこれを実現する方法を示し、クリーンで簡潔なソリューションを提供します。

次のスニペットを考えてみましょう:

<li key={index} className={activeClass, data.class, "main-class"}></li>

このコードは、複数のクラス名を className に連結しようとします。属性を使用しますが、それらが誤って個別の引数として className プロパティに割り当てられます。代わりに、テンプレート リテラルを使用して、目的のクラスを含む文字列を作成する必要があります。

ES6 テンプレート リテラルを使用して修正されたコードは次のとおりです。

<li key={index} className={`${activeClass} ${data.class} main-class`}></li>

クラス名を中括弧で囲みます。バックティック内でそれらを 1 つの文字列に連結できます。次に、className プロパティは、この動的に生成された文字列を受け取り、コンポーネントに指定されたすべてのクラスが含まれていることを確認します。

もう 1 つの便利な方法は、ワンライナー バージョンです。

<li key={index} className={`form-control round-lg ${this.state.valid ? '' : 'error'}`}></li>

条件式を使用します。バッククォート内で、条件に基づいてクラス間を切り替えます。この例では、有効な状態プロパティが false の場合にのみ「error」クラスが追加されます。

これらの手法は、ReactJS コンポーネントに複数のクラスを追加するためのシンプルで洗練されたソリューションを提供し、スタイルの設定と強化を容易にします。アプリケーションの機能。

以上がReactJS コンポーネントの className 属性に複数のクラスを追加するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。