React className avec add class « null »

Question

opérateur ternaire Je suis en train d'appliquer conditionnellement une classe à mon composant en utilisant une expression comme ceci:

.map(function(list, index) { 
    <div className={"myClass " + (position === index ? 'active' : null)}> 
} 

Mais il continue d'ajouter null comme classe, avec un résultat final comme ceci:

<div class="myClass active">... 
<div class="myClass null">... 

Ceci est un exemple simple, avec seulement deux noms de classe, donc je ne pouvais tout simplement remplacer null avec le nom de la classe par défaut. Mais dans une mise en page plus complexe, je devrais reproduire le même nom encore et encore.

Y a-t-il une meilleure approche pour résoudre ce problème?

Answer 1

Vous pouvez utiliser une chaîne vide '' au lieu de null comme:

.map(function(list, index) { 
    <div className={"myClass " + (position === index ? 'active' : '')}> 
} 

carte devrait également retourner une valeur:

.map(function(list, index) { 
    return <div className={"myClass " + (position === index ? 'active' : '')}>; 
} 

Answer 2

Si vous avez plusieurs classes, vous pourriez envisager de construire la liste des classes d'un tableau:

var classes = ["myClass"]; 

if (position === index) { 
    classes.push('active'); 
} 

return (
    <div className={classes.join(' ')}> 
     ... 
    </div> 
); 

Vous pouvez également utiliser une fonction d'assistance t va générer la chaîne className d'un objet comme ceci:

var classes = { 
    myClass: true, 
    active: position === index  
}; 

classnames est une telle utilité (et non le seul).