Richtige Vorgehensweise beim bedingten Styling in React

Ich mache gerade eine Reaktion und habe mich gefragt, ob es einen "richtigen" Weg gibt, bedingtes Styling zu machen. Im Tutorial verwenden sie

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

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

Wenn Sie lieber einen Klassennamen verwenden möchten, verwenden Sie auf jeden Fall einen Klassennamen.

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

Möglicherweise finden Sie auch das Paket mit den Klassennamen hilfreich. Damit würde Ihr Code folgendermaßen aussehen:

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

Es gibt keine "richtige" Möglichkeit, bedingtes Styling durchzuführen. Tun Sie, was für Sie am besten funktioniert. Für mich selbst vermeide ich lieber Inline-Styling und verwende Klassen auf die gerade beschriebene Weise.

POSTSCRIPT [06-AUG-2019]

Obwohl React in Bezug auf das Styling nicht begeistert ist, würde ich heutzutage eine CSS-in-JS-Lösung empfehlen. nämlich gestaltete Komponenten oder Emotionen . Wenn Sie React noch nicht kennen, halten Sie sich zunächst an CSS-Klassen oder Inline-Stile. Sobald Sie mit React vertraut sind, empfehle ich, eine dieser Bibliotheken zu übernehmen. Ich benutze sie in jedem Projekt.

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

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

Wenn Sie Inline-Stile bedingt anwenden müssen (alles oder nichts anwenden), funktioniert diese Notation auch:

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

Falls 'someCondition' nicht erfüllt ist, übergeben Sie ein leeres Objekt.

Erstens stimme ich Ihnen stilistisch zu - ich würde auch (und auch) bedingt Klassen anstelle von Inline-Stilen anwenden. Sie können jedoch dieselbe Technik verwenden:

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

Sammeln Sie für komplexere Statussätze 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>;

an Stelle von:

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

Sie können Folgendes mit Kurzschluss versuchen:

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

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

Schlüsselinformation aus dem Link:

Kurzschluss bedeutet, dass in JavaScript bei der Auswertung eines UND-Ausdrucks (&&), wenn der erste Operand falsch ist, JavaScript kurzschließt und nicht einmal den zweiten Operanden betrachtet.

Es ist erwähnenswert, dass dies false zurückgeben würde, wenn der erste Operand false ist. Daher müssen Sie möglicherweise berücksichtigen, wie sich dies auf Ihren Stil auswirkt.

Die anderen Lösungen sind möglicherweise mehr bewährte Methoden, aber es lohnt sich, sie zu teilen.

Ich bin auf diese Frage gestoßen, als ich versucht habe, dieselbe Frage zu beantworten. McCrohans Ansatz mit dem Klassenarray & Join ist solide.

Durch meine Erfahrung habe ich mit viel altem Ruby-Code gearbeitet, der in React konvertiert wird, und während wir die Komponente (n) aufbauen, greife ich sowohl nach vorhandenen CSS-Klassen als auch nach Inline-Stilen.

Beispiel-Snippet 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, "verpacke" 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 sehr unterschiedlich sein wird.

Eine andere Möglichkeit, den Inline-Stil und den Spread-Operator zu verwenden

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

Diese Methode ist in einigen Situationen hilfreich, in denen Sie eine Reihe von Eigenschaften gleichzeitig hinzufügen möchten, basierend auf der Bedingung.

Der beste Weg, um 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 ? "warning" : danger;
    return class;
}

Sie können so etwas verwenden.

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>;
  }

Sie können auch das NPM-Paket classnames verwenden, um die Arbeit mit dynamischen und bedingten className-Requisiten zu vereinfachen (insbesondere mehr als die Manipulation bedingter Zeichenfolgen).

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'