it-swarm.com.de

Richtiger Umgang mit dem bedingten Styling in React

Ich mache gerade ein paar Reaktionen, und ich habe mich gefragt, ob es einen "richtigen" Weg gibt, um das bedingte Styling durchzuführen. Im Tutorial verwenden sie

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

Ich ziehe es vor, kein Inline-Styling zu verwenden. Ich möchte stattdessen eine Klasse verwenden, um das bedingte Styling zu steuern. Wie würde man dies in der Denkweise von React angehen? Oder sollte ich einfach diese Inline-Styling-Methode verwenden?

35
davidhtien

Wenn Sie einen Klassennamen bevorzugen, verwenden Sie auf jeden Fall einen Klassennamen.

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

Möglicherweise finden Sie auch das classnames package hilfreich. Damit würde Ihr Code so aussehen:

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

Es gibt keine "richtige" Methode, um das bedingte Styling durchzuführen. Tun Sie, was für Sie am besten funktioniert. Ich selbst bevorzuge es, Inline-Styling zu vermeiden und Klassen in der eben beschriebenen Weise zu verwenden.

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

Überprüfen Sie den obigen Code. Das wird den Trick tun.

40
Abhay Shiro

Zunächst stimme ich Ihnen stilmäßig zu - ich würde (und mache) auch eher bedingt Klassen als Inline-Stile. Sie können jedoch dieselbe Technik verwenden:

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

Sammeln Sie für komplexere Zustandsgruppen ein Array von Klassen und wenden Sie sie an:

var classes = [];

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

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

Ich stieß auf diese Frage, als ich versuchte, dieselbe Frage zu beantworten. McCrohans Ansatz mit den Klassen Array & Join ist solide.

Durch meine Erfahrung habe ich mit einer Menge von veraltetem Ruby-Code gearbeitet, der in React konvertiert wird, und wenn wir die Komponente (n) aufbauen, kann ich sowohl nach vorhandenen CSS-Klassen als auch nach Inline-Styles suchen. 

beispielausschnitt innerhalb einer Komponente: 

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

Wieder greife ich nach altem CSS-Code, "packe" ihn mit der Komponente und gehe weiter. 

Ich habe wirklich das Gefühl, dass es ein bisschen in der Luft liegt, was "am besten" ist, da dieses Label je nach Projekt stark variieren kann. 

1
Denis S Dujota

die beste Art, mit dem Styling umzugehen, ist die Verwendung von Klassen mit einer Reihe von CSS-Eigenschaften.

Beispiel:

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

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