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

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!