Babel を使用して要素に反応するクラスを動的に追加するにはどうすればよいですか?

Babel での動的クラスの追加

動的コンテンツを操作する場合、多くの場合、追加のクラスを要素に追加することが必要になります。 Babel を利用する React アプリケーションでは、これは className 属性を通じて実現できます。

質問:

動的クラスを既存のクラスのリストに追加するにはどうすればよいですか?たとえば、className が「wrapper searchDiv」である React コンポーネントは、「wrapper searchDiv {this.state.something}」に動的に更新する必要があります。

答え:

これを実現するには 2 つのアプローチがあります:

1.従来の JavaScript メソッド:

次のように、JavaScript を使用して className 属性内に追加のクラスを追加します。

className={'wrapper searchDiv ' + this.state.something}

2.文字列テンプレート メソッド:

バッククォートを使用して文字列テンプレートを作成すると、よりクリーンで簡潔なコードが可能になります:

className={`wrapper searchDiv ${this.state.something}`}

どちらのメソッドでも、中かっこには JavaScript コードが含まれます。文字列の変更や動的な値の追加が可能になります。ただし、属性内での JSX 文字列と中括弧の組み合わせはサポートされていないことに注意することが重要です。

以上がBabel を使用して要素に反応するクラスを動的に追加するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。