テンプレート リテラルを使用して React で Tailwind CSS クラスを動的に変更する方法

Tailwind CSS: テンプレート リテラルによる動的クラス変更

React で条件付きスタイルを使用する場合、Tailwind CSS 内でテンプレート リテラルを活用すると強力です。クラスを動的に変更する技術。これを効果的に実装する方法を見てみましょう。

問題

一部の開発者は、テンプレート リテラルを使用して Tailwind CSS のクラスを条件付きで変更するときに問題に遭遇します。たとえば、次のようなコードは期待どおりに動作しない可能性があります:

const closeNav = () => {
  setClick(!click);
};

<div className={`absolute inset-0 ${click ? "translate-x-0" : "-translate-x-full" } transform z-400 h-screen w-1/4 bg-blue-300`}></div>

解決策

動的クラス変更にテンプレート リテラルを適用する正しい方法は次のとおりです。以下:

<div className={click ? "absolute inset-0 translate-x-0 transform z-400 h-screen w-1/4 bg-blue-300" : "absolute inset-0 -translate-x-full transform z-400 h-screen w-1/4 bg-blue-300"}></div>

または、テンプレートなしリテラル:

<div className={"absolute inset-0 " + (click ? "translate-x-0" : "-translate-x-full") + " transform z-400 h-screen w-1/4 bg-blue-300"}></div>

考慮事項

Tailwind の最適化を妨げる可能性があるため、クラス名の作成に文字列連結を使用しないでください。代わりに、完全なクラス名を選択するか、classNames、clsx、Tailwind 固有のソリューション (twin.macro、twind、xwind など) などのクラス選択テクニックを使用することを選択します。

その他のオプション

条件付きスタイルは、classname や clsx などのサードパーティ ライブラリや、twin.macro などの Tailwind 固有のソリューションを使用して実現することもできます。 Twind、xwind です。

続きを読む

詳細については、次のリソースを参照してください:

• [React.js 条件付き適用クラスnames](https://stackoverflow.com/questions/39584486/conditionally-applying-class-names-in-react-js)
• [手動クラス名にクラスを動的に追加するにはどうすればよいですか?](https ://www.sitepoint.com/dynamically-add-classes-javascript/)
• [条件付きスタイルを処理する正しい方法React](https://stackoverflow.com/questions/44916340/correct-way-to-handle-conditional-styling-in-react)
• [式の埋め込みJSX](https://reactjs.org/docs/jsx-in- Depth.html#embedding-expressions-in-jsx)
• [テンプレート リテラル - MDN](https://developer.mozilla. org/en-US/docs/Web/JavaScript/Reference/Template_literals)
• [本番環境向けの最適化 - ライティングパージ可能な HTML - Tailwind CSS](https://tailwindcss.com/docs/optimizing-for-production#writing-purgeable-html)

以上がテンプレート リテラルを使用して React で Tailwind CSS クラスを動的に変更する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。