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

JSX の手動クラス名にクラスを動的に追加する

JSX では、多くの場合、特定の条件に基づいて要素にクラスを動的に追加する必要があります。これには、静的クラス名と動的クラス名の両方を含めるように className プロパティを操作する必要があります。これを実現する方法は次のとおりです:

JavaScript 構文の使用

通常の JavaScript 構文を使用して、動的クラスを手動クラス名に追加できます:

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

これにより、静的クラス名「wrapper」と「searchDiv」が、次のように決定された動的クラス名と連結されます。状態プロパティ this.state.something.

文字列テンプレートの使用

または、バッククォートを使用して文字列テンプレート (ES6 テンプレート リテラル) を使用することもできます:

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

この構文を使用すると、動的クラスを含む JavaScript 式を文字列に直接挿入できます。 names.

注:

JSX の中括弧で囲まれたものはすべて JavaScript コードとして解釈されることに注意してください。したがって、必要に応じて className 属性内で複雑なロジックを実行し、文字列を操作できます。ただし、JSX 文字列と中括弧を属性内で直接結合することはできません。

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