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
Linda Hamiltonasal
2024-12-15 11:40:11682semak imbas

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>

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>

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>

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!

Kenyataan:
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