Chcę warunkowo wyświetlić i ukryć tę grupę przycisków w zależności od tego, co jest przekazywane z komponentu nadrzędnego, który wygląda następująco:
<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>
);
}
});
Nic się jednak nie dzieje z {this.props.showBulkActions? 'Pokaż ukryte'}. Czy robię tu coś złego?
Odpowiedzi:
Nawiasy klamrowe znajdują się wewnątrz ciągu, więc jest on oceniany jako ciąg. Muszą być na zewnątrz, więc to powinno działać:
Zwróć uwagę na spację po „przeciągnięciu w prawo”. Nie chcesz przypadkowo podać klasy „pull-righthow” zamiast „pull-right show”. Tam też muszą być nawiasy.
źródło
classnames
może nie być właściwe. Jeśli jesteś w swojejrender
funkcji i maszmap
, możesz wiedzieć tylko, czy chcesz dodać klasę podczas jej renderowania, więc ta odpowiedź jest do tego bardzo przydatna.this.props.showBulkActions ? 'btn-group pull-right show' : 'btn-group pull-right hidden')
. Nie elegancki, ale działa.Jak skomentowali inni, narzędzie classnames jest obecnie zalecanym podejściem do obsługi warunkowych nazw klas CSS w ReactJs.
W twoim przypadku rozwiązanie będzie wyglądać następująco:
...
Na marginesie, sugeruję, abyś starał się unikać używania obu klas
show
ihidden
klas, aby kod był prostszy. Najprawdopodobniej nie musisz ustawiać klasy, aby coś pokazywało się domyślnie.źródło
classNames
w tej chwili?Jeśli używasz transpilatora (takiego jak Babel lub Traceur), możesz użyć nowych „ ciągów szablonów ” ES6 .
Oto odpowiedź @ spitfire109, odpowiednio zmodyfikowana:
Takie podejście pozwala na wykonywanie schludne rzeczy tak, rendering albo
s-is-shown
albos-is-hidden
:źródło
s-is-shown
lubs-is-hidden
w bazie kodu, nie znajdzie tego kodu.Możesz użyć tutaj literałów ciągowych
źródło
Spoglądając na dobrą odpowiedź @ spitfire109, można zrobić coś takiego:
a następnie w ramach funkcji renderowania:
utrzymuje jsx krótki
źródło
Lub użyj nazw klas npm . Jest to bardzo łatwe i przydatne, zwłaszcza przy tworzeniu listy klas
źródło
Jeśli potrzebujesz tylko jednej opcjonalnej nazwy klasy:
źródło
false
klasę, gdy warunek się nie powiedzie.Możesz używać tablic ES6 zamiast nazw klas. Odpowiedź oparta jest na artykule dr Axela Rauschmayera: Warunkowo dodawanie wpisów do tablicy i literałów obiektowych .
źródło
2019:
React jest jezioro wiele narzędzi. Ale nie potrzebujesz
npm
do tego żadnej paczki. po prostu stwórz gdzieś funkcjęclassnames
i wywołaj ją, kiedy będziesz potrzebować;lub
przykład
Tylko dla inspiracji
Element stwierdzenie pomocniczych i wykorzystywane
toggle
metody(DOMTokenList)classList.toggle(class,condition)
przykład:
źródło
Bardziej eleganckie rozwiązanie, które jest lepsze pod względem konserwacji i czytelności:
źródło
możesz użyć tego:
źródło
To by działało dla ciebie
źródło
Możesz użyć tego pakietu npm. Obsługuje wszystko i ma opcje klas statycznych i dynamicznych opartych na zmiennej lub funkcji.
źródło
W
this.props.showBulkActions
zależności od wartości możesz dynamicznie przełączać klasy w następujący sposób.źródło
Chciałbym dodać, że możesz również używać zmiennej treści jako części klasy
Kontekstem jest rozmowa między botem a użytkownikiem, a style zmieniają się w zależności od nadawcy, oto wynik przeglądarki:
źródło
Jest to przydatne, gdy masz więcej niż jedną klasę do dołączenia. Możesz dołączyć do wszystkich klas w tablicy ze spacją.
źródło
Zastąpić:
z:
źródło
Odniesienie do odpowiedzi ogniowej @split, możemy ją zaktualizować o literały szablonów, które są bardziej czytelne, dla odniesienia Literatura szablonu javascript
źródło
Znalazłem to, co wyjaśnia, jak to zrobić za pomocą trójki i Biblioteki Classnames
źródło