ReactJS dodać dynamiczne klasy do klasy ręcznych nazw

Question

muszę dodawać dynamiczne klasę do listy regularnych zajęciach, ale nie mają pojęcia, w jaki sposób (używam Babel), coś jak to:

<div className="wrapper searchDiv {this.state.something}"> 
... 
</div> 

Any pomysły?

Dzięki

Answer 1

Można to zrobić, albo normalne javascript:

className={'wrapper searchDiv ' + this.state.something}

lub szablon ciąg wersja

className={`wrapper searchDiv ${this.state.something}`} z backticks.

Oba typy są oczywiście tylko javascript, ale pierwszy wzorzec jest tradycyjny. W każdym razie, w JSX, wszystko, co jest zamknięte w nawiasach klamrowych, jest wykonywane jako javascript, więc możesz zrobić to, co chcesz. Ale kombinacja ciągów JSX i nawiasów klamrowych nie jest dozwolona dla atrybutów.

Answer 2

W zależności od tego, ile klas dynamicznych trzeba dodać w miarę wzrostu projektu, prawdopodobnie warto sprawdzić narzędzie classnames od JedWatson na GitHub. Pozwala na reprezentowanie twoich warunkowych klas jako obiektu i zwraca te, które oceniają na true.

więc jako przykład ze swojego React dokumentacji:

render() { 

var btnClass = classNames({ 
    'btn': true, 
    'btn-pressed': this.state.isPressed, 
    'btn-over': !this.state.isPressed && this.state.isHovered 
}); 

return <button className={btnClass}>I'm a button!</button>; 

} 

Od React powoduje ponowne renderowanie gdy nastąpiła zmiana stanu, nazwy klasy dynamicznej są obsługiwane w sposób naturalny i uaktualniane ze stanem twój komponent.

Answer 3

Możesz użyć pakietu npm this. Obsługuje wszystko i ma opcje dla klas statycznych i dynamicznych na podstawie zmiennej lub funkcji.

// Support for string arguments 
getClassNames('class1', 'class2'); 

// support for Object 
getClassNames({class1: true, class2 : false}); 

// support for all type of data 
getClassNames('class1', 'class2', ['class3', 'class4'], { 
    class5 : function() { return false; }, 
    class6 : function() { return true; } 
}); 

<div className={getClassNames({class1: true, class2 : false})} />