Bagaimanakah Saya Boleh Menggunakan Kelas CSS Tailwind Secara Dinamik dalam Reaksi Menggunakan Literal Templat?

Menggunakan Kelas CSS Dinamik dengan Huruf Templat dalam CSS Tailwind

Anda boleh menghadapi kesukaran apabila cuba menukar kelas CSS secara dinamik dalam CSS Tailwind. Contohnya, jika anda cuba menggunakan kod berikut:

const [click, setClick] = useState(false);

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

const openNav = () => {
  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 "
>
  <XIcon onClick={closeNav} className=" absolute h-8 w-8 right-0 " />
</div>;

Kod ini tidak akan dilaksanakan dengan berkesan. Untuk menangani isu ini, buat perubahan berikut:

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

// Alternatively (without template 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>

Yang penting, elakkan menggunakan gabungan rentetan semasa membina nama kelas, seperti yang ditunjukkan dalam perkara berikut:

<div className={`text-${error ? 'red' : 'green'}-600`}></div>

Sebaliknya, pilih untuk memilih nama kelas lengkap:

<div className={`${error ? 'text-red-600' : 'text-green-600'}`}></div>

// Following is also valid if you don't need to concatenate the class names
<div className={error ? 'text-red-600' : 'text-green-600'}></div>

Tailwind akan mengelak daripada menghapuskan nama kelas lengkap daripada binaan pengeluaran jika ia disertakan dalam templat anda.

Selain itu, anda mempunyai akses kepada pelbagai pilihan, termasuk perpustakaan seperti nama kelas atau clsx dan penyelesaian khusus Tailwind seperti twin.macro, twind dan xwind.

Bacaan Lanjut

• [React.js bersyarat menggunakan nama kelas](https://github.com/facebook/react/issues/2316)
• [Bagaimana untuk menambahkan kelas secara dinamik pada nama kelas manual?](https://stackoverflow.com/questions /37585255/cara-dinamik-menambahkan-kelas-ke-nama-kelas-manual)
• [Betul cara mengendalikan penggayaan bersyarat dalam React](https://dev.to/furkancakmak/conditional-css-class-names-in-react-the-right-way-iwk)
• [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 Bagaimanakah Saya Boleh Menggunakan Kelas CSS Tailwind Secara Dinamik dalam Reaksi Menggunakan Literal Templat?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!