Poprawny sposób obsługi stylów warunkowych w Reakcie

Robię teraz trochę Reacta i zastanawiałem się, czy istnieje „poprawny” sposób na stylizację warunkową. W samouczku używają

style={{
  textDecoration: completed ? 'line-through' : 'none'
}}

Wolę nie używać stylów wbudowanych, więc zamiast tego chcę używać klasy do sterowania stylami warunkowymi. Jak można podejść do tego w myśleniu Reacta? A może powinienem po prostu użyć tego wbudowanego sposobu stylizacji?

Jeśli wolisz używać nazwy klasy, koniecznie używaj nazwy klasy.

className={completed ? 'text-strike' : null}

Pomocny może być również pakiet nazw klas . Dzięki niemu Twój kod wyglądałby następująco:

className={classNames({ 'text-strike': completed })}

Nie ma „poprawnego” sposobu na stylizację warunkową. Rób wszystko, co jest dla Ciebie najlepsze. Osobiście wolę unikać stylizacji wbudowanej i używać klas w sposób właśnie opisany.

POSTSCRIPT [06-AUG-2019]

Chociaż pozostaje prawdą, że React nie ma opinii na temat stylizacji, obecnie polecam rozwiązanie CSS-in-JS; mianowicie stylizowane elementy lub emocje . Jeśli nie znasz jeszcze Reacta, na początek trzymaj się klas CSS lub stylów wbudowanych. Ale kiedy już poczujesz się dobrze z Reactem, polecam zaadoptowanie jednej z tych bibliotek. Używam ich w każdym projekcie.

 <div style={{ visibility: this.state.driverDetails.firstName != undefined? 'visible': 'hidden'}}></div>

Sprawdź powyższy kod. To wystarczy.

Jeśli musisz warunkowo zastosować style wbudowane (zastosuj wszystko lub nic), ta notacja również działa:

style={ someCondition ? { textAlign:'center', paddingTop: '50%'} : {}}

W przypadku niespełnienia warunku „someCondition” przekazujesz pusty obiekt.

Po pierwsze, zgadzam się z tobą ze względu na styl - również (i również stosuję) warunkowo stosowałbym klasy, a nie style wbudowane. Ale możesz użyć tej samej techniki:

<div className={{completed ? "completed" : ""}}></div>

Aby uzyskać bardziej złożone zestawy stanów, zbierz tablicę klas i zastosuj je:

var classes = [];

if (completed) classes.push("completed");
if (foo) classes.push("foo");
if (someComplicatedCondition) classes.push("bar");

return <div className={{classes.join(" ")}}></div>;

zamiast tego:

style={{
  textDecoration: completed ? 'line-through' : 'none'
}}

możesz spróbować wykonać następujące czynności, używając krótkich obwodów:

style={{
  textDecoration: completed && 'line-through'
}}

https://codeburst.io/javascript-short-circuit-conditionals-bbc13ac3e9eb

kluczowe informacje z linku:

Zwarcie oznacza, że ​​w JavaScript, gdy obliczamy wyrażenie AND (&&), jeśli pierwszy operand jest fałszywy, JavaScript spowoduje zwarcie i nawet nie spojrzy na drugi operand.

Warto zauważyć, że zwróci to wartość false, jeśli pierwszy operand jest fałszywy, więc może być konieczne rozważenie, jak wpłynie to na twój styl.

Inne rozwiązania mogą być lepszą praktyką, ale pomyślałem, że warto się nimi podzielić.

Inny sposób, używając stylu wbudowanego i operatora spreadu

style={{
  ...completed ? { textDecoration: completed } : {}
}}

W ten sposób przydaje się w niektórych sytuacjach, w których chcesz dodać kilka właściwości w tym samym czasie na podstawie warunku.

Natknąłem się na to pytanie, próbując odpowiedzieć na to samo pytanie. Podejście McCrohana do klas array & join jest solidne.

Dzięki mojemu doświadczeniu pracowałem z wieloma starszymi kodami ruby, które są konwertowane do Reacta, a kiedy budujemy komponenty, sięgam po istniejące klasy css i style wbudowane.

przykładowy fragment w komponencie:

// if failed, progress bar is red, otherwise green 
<div
    className={`progress-bar ${failed ? failed' : ''}`}
    style={{ width: this.getPercentage() }} 
/>

Ponownie sięgam po starszy kod CSS, „pakuję” go w komponent i przechodzę dalej.

Więc naprawdę czuję, że jest trochę w powietrzu, co jest „najlepsze”, ponieważ ta etykieta będzie się znacznie różnić w zależności od twojego projektu.

Najlepszym sposobem obsługi stylu jest użycie klas z zestawem właściwości css.

przykład:

<Component className={this.getColor()} />

getColor() {
    let class = "badge m2";
    class += this.state.count===0 ? "warning" : danger;
    return class;
}

Możesz użyć czegoś takiego.

render () {
    var btnClass = 'btn';
    if (this.state.isPressed) btnClass += ' btn-pressed';
    else if (this.state.isHovered) btnClass += ' btn-over';
    return <button className={btnClass}>{this.props.label}</button>;
  }

Możesz też użyć pakietu NPM nazw klas, aby uprościć pracę z dynamicznymi i warunkowymi właściwościami className (szczególnie bardziej niż warunkowe manipulowanie ciągami znaków).

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: true, bar: true }); // => 'foo bar'