web-dev-qa-db-fra.com

Comment appliquer conditionnellement des classes CSS dans React JS

J'ai réfléchi à la meilleure façon d'appliquer conditionnellement une classe CSS dans React JS. J'ai vu quelques réponses se regrouper, mais il n'y en a pas beaucoup ou elles ne sont tout simplement pas aussi élaboratif que je voudrais.

javascriptcssreactjs
11
Mr. Benedict

La documentation React sur manipulation des noms de classe suggère le package NPM classnames ).

Les documents pour le package sont super.

L'extrait suivant provient directement du package README: Utilisation section

classNames('foo', 'bar');                 // => 'foo bar'
classNames('foo', { bar: true });         // => 'foo bar'
classNames({ 'foo-bar': true });          // => 'foo-bar'
classNames({ 'foo-bar': false });         // => ''
classNames({ foo: true }, { bar: true }); // => 'foo bar'
classNames({ foo: false, bar: true });    // => 'bar'

// lots of arguments of various types
classNames('foo', { bar: true, duck: false }, 'baz', { quux: true }); 
// => 'foo bar baz quux'

// other falsy values are just ignored
classNames(null, false, 'bar', undefined, 0, 1, { baz: null }, ''); 
// => 'bar 1'
16
Ross Allen

Sans la bibliothèque classNames, vous pouvez simplement conditionner la classe à l'état, comme ceci:

<div className={ this.state.end ? 'hidden' : 'shown' }>
    text
</div>
13
Adam Orlov

Utiliser la bibliothèque de noms de classe https://github.com/JedWatson/classnames

La fonction classNames prend n'importe quel nombre d'arguments qui peuvent être une chaîne ou un objet. Si la valeur de la clé est fausse, elle ne sera pas incluse dans la sortie.

var classNames = require('classnames');

var Button = React.createClass({
  // ...
  render () {
    var btnClass = classNames({
      'btn': true,
      'btn-pressed': false,
      'btn-over': true
    });
    // output: btnClass = "btn btn-over"
    return <button className={btnClass}>{this.props.label}</button>;
  }
});

Jetez un œil au document et faites-moi savoir si vous avez des questions!

À votre santé

3
Denis Ivanov

La solution indiquée ci-dessous par un autre auteur dans le commentaire ci-dessus fonctionne pour moi

<div className={ this.state.end ? 'hidden' : 'shown' }>text</div>

Juste un ajout si vous souhaitez ajouter plus de classes, puis ajoutez une classe séparée par un espace.

3
Alok Ranjan

Pour mémoire, je pense que les réponses de la bibliothèque classnames sont les plus correctes, mais si vous ne vouliez pas ajouter une autre dépendance, vous pourriez rouler votre propre implémentation simple qui fonctionne un peu comme jQuery:

function getClassBuilder () {
    return {
        array: [],
        add: function (className) {
            if (this.array.indexOf(className) < 0) {
                this.array.Push(className);
            }
        },
        remove: function (className) {
            var index = this.array.indexOf(className);
            if (index > -1) {
                this.array.splice(index, 1);
            }
        },
        toString: function () {
            return this.array.join(' ');
        }
    }
}

puis, lorsque vous devez l'utiliser:

var builder = getClassBuilder();
builder.add('class1');
builder.add('class2');
if (condition) { builder.remove('class1') };

<a href="#" className={builder.toString()}>Button</a>
2
bmceldowney

Je vais illustrer sur bootstrap classes, changera la couleur du texte conditionnellement: si count = 0 le texte sera rouge, sinon sera bleu

class Counter extends Component {
  state = { count: 6 };

  render() {
let classes="text-center" //class is reserved Word in react.js
classes+= (this.state.count===0) ? "text-danger" : "text-primary"
    return (
      <div>
        <h2 className={classes}>Hello World</h2>
      </div>
    );
  }
  formatCount() {
    const { count } = this.state;
    return count === 0 ? "zero" : count;
  }
}
0
Yilmaz

De nombreuses réponses supposent qu'il s'agit de basculer conditionnellement les classes CSS (ternaire si est adéquat), mais cela devient beaucoup plus obtus lorsque vous devez éventuellement inclure des noms de classe. Les ifs ternaires multiples avec de fausses expressions vides sont verbeux. Un package NPM peut être un peu trop. Une fonction peut également être exagérée pour certains.

Voici ce que je fais.

const classNames = [
  "className1",
  condition1 && "className2",
  condition2 && "className3",
  condition3 && "className4",
].filter(e => e).join(" ");
0
Audun Olsen

Si vous devez ajouter une classe conditionnelle à une classe existante, celle-ci peut vous donner une idée

<span className={'fa ' + (this.state.dropdownActive ? 'fa-angle-up' : 'fa-angle-down')}></span>

dans cet exemple, je montre une icône de flèche pour une liste déroulante en fonction de l'état de la liste déroulante. J'ai besoin de conserver la classe fa dans tous les cas pour définir la famille de polices de la plage, et je n'ai qu'à basculer entre fa-angle-up et fa-angle-down.

Même exemple avec les littéraux de modèle

<span className={`fa ${this.state.dropdownActive ? 'fa-angle-up' : 'fa-angle-down'}`}></span>
0
Orkun Tuzel