0
votes

Comment rendre différentes classes sur la plage en utilisant réact.js?

<span className="inactiveBtn">Inactive</span>
    <span className="activeBtn">Active</span>
    <span className="deletedBtn">To be Delted</span>
I am using these 3 spans in my table column, but I want to render it dynamically, as in if text is active, inactive or deleted then it should render its respective class and text to the span.

reactjs

1 commentaires

Utilisez Github.com/jedwatson/classnames

3 Réponses :

0
votes

Vous pouvez utiliser un opérateur ternaire pour déterminer la classe à utiliser.

C'est comme une déclaration raccourcie si sinon. xxx

supposant que vous avez une variable en place pour Chaque bouton qui maintient la trace de l'état de ladite touche. Utilisez, cette variable pour définir la condition. xxx

0 commentaires

3
votes

Vous pouvez stocker les trois options dans un tableau:

const options = [{label: 'Inactive', class: 'inactiveBtn'},
{label: 'Active', class: 'activeBtn'},
{label: 'To Be Deleted', class: 'deletedBtn'}];

{options.map((item, index) => 
 <span key={index} className={item.class}>{item.label}</span> )}

2 commentaires

Pouvez-vous s'il vous plaît créer un fichier de démonstration

Codepen.io/nomanhassan/pen/gpqamq

0
votes

Selon le nombre de classes dynamiques que vous devez ajouter au fur et à mesure que votre projet grandit, il convient probablement de vérifier le NomsNames utilitaire de Jedwatson sur Github. Il vous permet de représenter vos classes conditionnelles en tant qu'objet et de retourner ceux qui évaluent à vrai.

Ainsi, à titre d'exemple de sa documentation réactive: xxx

depuis réagir Rentrez lorsqu'il y a un changement d'état, vos noms de classe dynamique sont traités naturellement et sont tenus à jour avec l'état de votre composant.

espère que cela vous aidera!

0 commentaires