Comment modifier dynamiquement les classes CSS Tailwind dans React à l'aide de littéraux de modèles ?

Tailwind CSS : modifications de classe dynamiques avec les littéraux de modèle

Lorsque vous travaillez avec un style conditionnel dans React, tirer parti des littéraux de modèle dans Tailwind CSS est un outil puissant technique pour modifier dynamiquement les classes. Voyons comment cela peut être mis en œuvre efficacement.

Le problème

Certains développeurs rencontrent des problèmes lors de l'utilisation de littéraux de modèles pour modifier conditionnellement les classes dans Tailwind CSS. Par exemple, un code similaire à celui-ci peut ne pas fonctionner comme prévu :

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>

La solution

La manière correcte d'appliquer des littéraux de modèle pour les changements de classe dynamiques est la suivante suit :

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

Alternativement, sans modèle littéraux :

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

Considérations

Évitez d'utiliser la concaténation de chaînes pour créer des noms de classe, car cela peut gêner les optimisations de Tailwind. Au lieu de cela, optez pour la sélection de noms de classe complets ou en utilisant des techniques de sélection de classe telles que classNames, clsx ou des solutions spécifiques à Tailwind comme twin.macro, twind et xwind.

Autres options

Le style conditionnel peut également être obtenu à l'aide de bibliothèques tierces telles que les noms de classe ou clsx, ou de solutions spécifiques à Tailwind telles que twin.macro, twind et xwind.

Lectures complémentaires

Pour plus d'informations, reportez-vous aux ressources suivantes :

• [React.js appliquant conditionnellement la classe noms](https://stackoverflow.com/questions/39584486/conditionally-applying-class-names-in-react-js)
• [Comment ajouter dynamiquement une classe aux noms de classe manuels ?](https ://www.sitepoint.com/dynamically-add-classes-javascript/)
• [Manière correcte de gérer le style conditionnel dans React](https://stackoverflow.com/questions/44916340/correct-way-to-handle-conditional-styling-in-react)
• [Intégration d'expressions dans JSX](https://reactjs. org/docs/jsx-in-owned.html#embedding-expressions-in-jsx)
• [Modèle littéraux - MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals)
• [Optimisation pour la production - Écriture de code HTML purgeable - Tailwind CSS](https : //tailwindcss.com/docs/optimizing-for-production#writing-purgeable-html)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!