JSX でクラス名を動的に追加および管理するにはどうすればよいですか?

JSX でのクラス名の動的拡張

JSX では、クラス名を動的に拡張するのは難しい場合があります。一般的な要件の 1 つは、状態またはプロパティに基づいて条件付きクラスを追加することです。これを実現する方法は次のとおりです。

オプション 1: JavaScript 連結

<div className={'wrapper searchDiv ' + this.state.something}>
  ...
</div>

このメソッドは JavaScript 連結を利用して、動的クラスを既存のクラス リストに追加します。

オプション 2: 文字列テンプレートリテラル

<div className={`wrapper searchDiv ${this.state.something}`}>
  ...
</div>

文字列テンプレート リテラル (バックティック) は、動的クラス名を構築するためのよりクリーンな構文を提供します。 ${} を使用して文字列内に式を埋め込むことができます。

注:

• JSX 属性は JavaScript コードとして扱われるため、実行できることに注意してください。中括弧内の JavaScript。
• ただし、属性内での JSX 文字列と中括弧の組み合わせは使用できません。サポートされています。
• JavaScript の連結と文字列テンプレート リテラルの両方が、JSX での動的なクラス名操作のための実行可能なソリューションを提供します。

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