JSX の静的クラス名に動的クラスを追加するにはどうすればよいですか?

手動クラス名への動的クラスの追加

Babel の JavaScript ベースの JSX のコンテキストでは、動的クラスを追加する必要がある場合があります。 class を既存のクラスのリストに追加します。これを実現する方法は次のとおりです:

2 つの主なアプローチ:

従来の JavaScript:

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

この方法は次のことを組み合わせます。動的クラスを追加するための通常の文字列連結name.

文字列テンプレートのバージョン:

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

ここでは、JavaScript 式の補間を可能にする文字列テンプレートを作成するためにバッククォートが使用されています。

JSX 固有の考慮事項:

JSX、中括弧は JavaScript コードを囲むため、その中にあるものはすべて実行されます。ただし、属性の中括弧で JSX 文字列を組み合わせる場合には注意が必要です。

代替案:

あるいは、Babel のtransform-class-properties プラグインを利用してクラスを有効にすることもできます。形式でのプロパティの割り当て:

class MyComponent {
  classes = 'wrapper searchDiv ' + this.state.something;
}

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