Je veux afficher et masquer ce groupe de boutons de manière conditionnelle en fonction de ce qui est passé du composant parent qui ressemble à ceci:
<TopicNav showBulkActions={this.__hasMultipleSelected} />
....
__hasMultipleSelected: function() {
return false; //return true or false depending on data
}
....
var TopicNav = React.createClass({
render: function() {
return (
<div className="row">
<div className="col-lg-6">
<div className="btn-group pull-right {this.props.showBulkActions ? 'show' : 'hidden'}">
<button type="button" className="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
Bulk Actions <span className="caret"></span>
</button>
<ul className="dropdown-menu" role="menu">
<li><a href="#">Merge into New Session</a></li>
<li><a href="#">Add to Existing Session</a></li>
<li className="divider"></li>
<li><a href="#">Delete</a></li>
</ul>
</div>
</div>
</div>
);
}
});
Cependant, rien ne se passe avec les {this.props.showBulkActions? 'show': 'caché'}. Suis-je en train de faire quelque chose de mal ici?
Réponses:
Les accolades sont à l'intérieur de la chaîne, elle est donc évaluée en tant que chaîne. Ils doivent être à l'extérieur, donc cela devrait fonctionner:
Notez l'espace après "tirer vers la droite". Vous ne voulez pas fournir accidentellement la classe "pull-rightshow" au lieu de "pull-right show". Les parenthèses doivent également être présentes.
la source
classnames
pourrait ne pas être approprié. Si vous êtes dans votrerender
fonction et que vous en avez unmap
, vous ne savez peut-être que si vous voulez ajouter une classe au moment où vous la rendez, donc cette réponse est très utile pour cela.this.props.showBulkActions ? 'btn-group pull-right show' : 'btn-group pull-right hidden')
. Pas élégant mais ça marche.Comme d'autres l'ont commenté, les noms de classe utilitaire est l'approche actuellement recommandée pour gérer les noms de classe CSS conditionnels dans ReactJs.
Dans votre cas, la solution ressemblera à:
...
En guise de remarque, je vous suggère d'essayer d'éviter d'utiliser à la fois les classes
show
ethidden
, afin que le code puisse être plus simple. Vous n'avez probablement pas besoin de définir une classe pour que quelque chose soit affiché par défaut.la source
classNames
en ce moment?Si vous utilisez un transpilateur (comme Babel ou Traceur), vous pouvez utiliser les nouvelles " chaînes de modèle " ES6 .
Voici la réponse de @ spitfire109, modifiée en conséquence:
Cette approche vous permet de faire des choses intéressantes comme ça, en rendant soit
s-is-shown
ous-is-hidden
:la source
s-is-shown
ous-is-hidden
dans la base de code, il ne trouvera pas ce code.Vous pouvez utiliser ici des littéraux de chaîne
la source
En dépensant sur la bonne réponse de @ spitfire109, on pourrait faire quelque chose comme ceci:
puis dans la fonction de rendu:
garde le jsx court
la source
Ou utilisez des noms de classe npm . C'est très simple et utile surtout pour construire la liste des classes
la source
Dans le cas où vous aurez besoin d'un seul nom de classe facultatif:
la source
false
classe lorsque la condition échoue.Vous pouvez utiliser des tableaux ES6 au lieu de noms de classe. La réponse est basée sur l'article du Dr. Axel Rauschmayer: Ajout conditionnel d'entrées à l'intérieur de tableaux et d'objets littéraux .
la source
2019:
React est un lac de nombreux services publics. Mais vous n'avez besoin d'aucun
npm
package pour cela. créez quelque part la fonctionclassnames
et appelez-la quand vous en avez besoin;ou
exemple
Juste pour l'inspiration
déclarer l'élément d'assistance et utilisé la
toggle
méthode(DOMTokenList)classList.toggle(class,condition)
exemple:
la source
Solution plus élégante, meilleure pour la maintenance et la lisibilité:
la source
vous pouvez utiliser ceci:
la source
Cela fonctionnerait pour vous
la source
Vous pouvez utiliser ce package npm. Il gère tout et dispose d'options pour les classes statiques et dynamiques basées sur une variable ou une fonction.
la source
En fonction de la valeur de
this.props.showBulkActions
vous pouvez changer de classe dynamiquement comme suit.la source
Je voudrais ajouter que vous pouvez également utiliser un contenu variable dans le cadre de la classe
Le contexte est un chat entre un bot et un utilisateur, et les styles changent en fonction de l'expéditeur, voici le résultat du navigateur:
la source
Ceci est utile lorsque vous avez plusieurs classes à ajouter. Vous pouvez joindre toutes les classes dans un tableau avec un espace.
la source
Remplacer:
avec:
la source
Référence à @split fire answer, nous pouvons le mettre à jour avec des littéraux de modèle, ce qui est plus lisible, pour référence Checkout javascript template literal
la source
J'ai trouvé cela qui explique comment le faire avec un ternaire et avec la bibliothèque de noms de classes
la source