Comment appliquer conditionnellement des attributs de classe dans les composants React ?

Application conditionnelle des attributs de classe dans React

Dans React, il est souvent nécessaire d'afficher ou de masquer de manière conditionnelle des éléments en fonction des valeurs transmises par les composants parents . Ceci peut être réalisé en manipulant les attributs de classe du composant enfant.

Exemple :

<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>
        );
      }
    });

Explication :

La clé pour appliquer conditionnellement les attributs de classe dans React consiste à utiliser l'opérateur conditionnel (ternaire) entre les accolades pour la propriété className. Dans cet exemple, si this.props.showBulkActions est vrai, la classe show est appliquée, sinon la classe cachée est appliquée.

Remarque : Assurez-vous que les accolades sont à l'extérieur de la chaîne, comme le montre l'exemple ci-dessus. Sinon, l'expression sera évaluée comme une chaîne et les noms de classe souhaités ne seront pas appliqués.

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!