Rumah > hujung hadapan web > tutorial css > Bagaimana untuk Mengubah Kelas CSS Tailwind secara Dinamik dalam Reaksi Menggunakan Literal Templat?

Bagaimana untuk Mengubah Kelas CSS Tailwind secara Dinamik dalam Reaksi Menggunakan Literal Templat?

Linda Hamilton
Lepaskan: 2024-12-15 11:40:11
asal
679 orang telah melayarinya

How to Dynamically Change Tailwind CSS Classes in React Using Template Literals?

Tailwind CSS: Perubahan Kelas Dinamik dengan Literal Templat

Apabila bekerja dengan penggayaan bersyarat dalam React, memanfaatkan literal templat dalam Tailwind CSS adalah satu kuasa teknik untuk mengubah suai kelas secara dinamik. Mari kita mendalami cara ini boleh dilaksanakan dengan berkesan.

Isunya

Sesetengah pembangun menghadapi masalah apabila menggunakan literal templat untuk menukar kelas secara bersyarat dalam Tailwind CSS. Sebagai contoh, kod yang serupa dengan yang berikut mungkin tidak berfungsi seperti yang diharapkan:

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>
Salin selepas log masuk

Penyelesaian

Cara yang betul untuk menggunakan literal templat untuk perubahan kelas dinamik adalah seperti berikut:

<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>
Salin selepas log masuk

Sebagai alternatif, tanpa templat literals:

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

Pertimbangan

Elakkan menggunakan gabungan rentetan untuk mencipta nama kelas, kerana ini boleh menghalang pengoptimuman Tailwind. Sebaliknya, pilih untuk memilih nama kelas yang lengkap atau menggunakan teknik pemilihan kelas seperti classNames, clsx atau penyelesaian khusus Tailwind seperti twin.macro, twind dan xwind.

Pilihan Lain

Penggayaan bersyarat juga boleh dicapai menggunakan perpustakaan pihak ketiga seperti nama kelas atau clsx, atau penyelesaian khusus Tailwind seperti twin.macro, twind dan xwind.

Bacaan Lanjut

Untuk maklumat lanjut, rujuk sumber berikut:

  • [React.js menggunakan kelas secara bersyarat names](https://stackoverflow.com/questions/39584486/conditionally-applying-class-names-in-react-js)
  • [Bagaimana untuk menambahkan kelas secara dinamik pada nama kelas manual?](https ://www.sitepoint.com/dynamically-add-classes-javascript/)
  • [Cara yang betul untuk mengendalikan penggayaan bersyarat dalam React](https://stackoverflow.com/questions/44916340/correct-way-to-handle-conditional-styling-in-react)
  • [Membenamkan Ungkapan dalam JSX](https://reactjs.org/docs/jsx-in-depth.html#embedding-expressions-in-jsx)
  • [Templat literal - MDN](https://developer.mozilla. org/en-US/docs/Web/JavaScript/Reference/Template_literals)
  • [Mengoptimumkan untuk Pengeluaran - Menulis HTML yang boleh dibersihkan - Tailwind CSS](https://tailwindcss.com/docs/optimizing-for-production#writing-purgeable-html)

Atas ialah kandungan terperinci Bagaimana untuk Mengubah Kelas CSS Tailwind secara Dinamik dalam Reaksi Menggunakan Literal Templat?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan