複数の CSS クラスを ReactJS コンポーネントに挿入するにはどうすればよいですか?

ReactJS コンポーネントへの複数のクラスの挿入

ReactJS では、className 属性を使用して要素をスタイルするための CSS クラスを定義できます。複数のクラスを操作する場合、それらを効率的かつ動的に追加する方法を理解することが重要です。

問題:

初心者が複数のクラスを割り当てようとしたときに問題が発生しました。 li 要素内の className 属性:

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

解決策:

この問題を解決するには、ES6 テンプレート リテラルを利用します:

const classes = `active ${data.class} main-class`;

複数のクラスをバッククォートで囲み、スペースで結合することで、className 属性に割り当てることができるクラスの動的な文字列を作成します:

<li key={index} className={classes} onClick={self.clicked.bind(self, index)}></li>

例:

const errorMessage = this.state.error ? "error" : "";
const inputClasses = `form-control ${errorMessage}`;

次に、単純に入力をレンダリングします。

<input className={inputClasses} />

このメソッドは、複数のクラスを ReactJS コンポーネントに挿入するための簡単で多用途なアプローチを提供し、柔軟性とコードの可読性を高めます。

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