React.js Inline-Style-Best-Praktiken

Question

Ich bin mir bewusst, dass Sie Styles innerhalb von React-Klassen spezifizieren können, wie folgt:

const MyDiv = React.createClass({
  render: function() {
    const style = {
      color: 'white',
      fontSize: 200
    };

    return  Hab einen guten und produktiven Tag! ;
  }
});

Sollte ich darauf abzielen, alle Stylings auf diese Weise zu machen und keine Styles in meiner CSS-Datei zu spezifizieren?

Oder sollte ich Inline-Styles komplett vermeiden?

Es erscheint seltsam und unordentlich, beides zu tun - es müssten zwei Stellen überprüft werden, wenn das Styling angepasst wird.

Answer 1

Es gibt noch nicht viele "Best Practices". Diejenigen von uns, die Inline-Styles für React-Komponenten verwenden, experimentieren noch sehr.

Es gibt eine Reihe von Ansätzen, die stark variieren: React Inline-Style-Bibliothek-Vergleichstabelle

Alles oder nichts?

Was wir als "Stil" bezeichnen, umfasst tatsächlich eine Reihe von Konzepten:

• Layout - wie ein Element/Komponente in Beziehung zu anderen aussieht
• Aussehen - die Merkmale eines Elements/einer Komponente
• Verhalten und Zustand - wie ein Element/eine Komponente in einem bestimmten Zustand aussieht

Beginnen Sie mit Zustandsstilen

React verwaltet bereits den Zustand Ihrer Komponenten, daher sind Stile für Zustand und Verhalten eine natürliche Ergänzung zu Ihrer Komponentenlogik.

Statt Komponenten aufzubauen, die mit bedingten Zustandsklassen gerendert werden sollen, sollten Sie stattdessen Zustandsstile direkt hinzufügen:

// Typische Komponente mit Zustandsklassen

// Verwenden von Inline-Styles für Zustand

Beachten Sie, dass wir hier eine Klasse verwenden, um das Aussehen zu stylen, aber keine mit .is- vorangestellte Klasse mehr für Zustand und Verhalten verwenden.

Wir können Object.assign (ES6) oder _.extend (underscore/lodash) verwenden, um die Unterstützung für mehrere Zustände hinzuzufügen:

// Unterstützung von mehreren Zuständen mit Inline-Styles

Anpassung und Wiederverwendbarkeit

Da wir jetzt Object.assign verwenden, wird es sehr einfach, unsere Komponente mit verschiedenen Stilen wiederverwendbar zu machen. Wenn wir die Standardstile überschreiben möchten, können wir dies am Aufrufort mit Props tun, wie zum Beispiel: . Implementiert wie folgt:

Layout

Persönlich sehe ich keinen überzeugenden Grund, Layout-Stile inline zu setzen. Es gibt viele großartige CSS-Layout-Systeme da draußen. Ich würde einfach eines verwenden.

Trotzdem sollten Sie keine Layout-Stile direkt zu Ihrer Komponente hinzufügen. Ummanteln Sie Ihre Komponenten mit Layout-Komponenten. Hier ist ein Beispiel.

// Dies koppelt Ihre Komponente an das Layout-System
// Es verringert die Wiederverwendbarkeit Ihrer Komponente

// Das ist viel einfacher zu pflegen und zu ändern

Für Layout-Unterstützung versuche ich oft, Komponenten auf 100% width und height zu entwerfen.

Aussehen

Dies ist der umstrittenste Bereich der "Inline-Style"-Debatte. Letztendlich hängt es von der Komponente ab, die Sie entwerfen, und dem Komfort Ihres Teams mit JavaScript ab.

Eines ist sicher, Sie werden die Unterstützung einer Bibliothek benötigen. Browser-Zustände (:hover, :focus) und Media-Queries sind in reinem React mühsam.

Ich mag Radium, weil die Syntax für diese schwierigen Teile so gestaltet ist, dass sie der von SASS ähnelt.

Code-Organisation

Oft sieht man ein Stilobjekt außerhalb des Moduls. Für eine Aufgabenliste-Komponente könnte es so aussehen:

var styles = {
  root: {
    display: "block"
  },
  item: {
    color: "black"

    complete: {
      textDecoration: "line-through"
    },

    due: {
      color: "red"
    }
  },
}

Getter-Funktionen

Das Hinzufügen einer Menge Style-Logik zu Ihrem Template kann ein wenig unübersichtlich werden (wie oben gezeigt). Ich ziehe es vor, Getter-Funktionen zu erstellen, um Styles zu berechnen:

React.createClass({
  getStyles: function () {
    return Object.assign(
      {},
      item.props.complete && styles.complete,
      item.props.due && styles.due,
      item.props.due && this.props.dueStyles
    );
  },

  render: function () {
    return {this.props.item}
  }
});

Weitere Beobachtungen

Ich habe all dies früher in diesem Jahr auf der React Europe ausführlicher besprochen: Inline-Styles und wann es am besten ist, "nur CSS zu verwenden".

Ich helfe gerne, wenn Sie neue Entdeckungen machen :) Melden Sie sich bei mir -> @chantastic

Answer 2

Das style-Attribut in React erwartet, dass der Wert ein Objekt ist, d.h. ein Schlüssel-Wert-Paar.

style = {} wird ein weiteres Objekt darin haben, wie z.B. {float:'right'}, um es funktionieren zu lassen.

Audit herunterladen

Hoffentlich löst das das Problem

Answer 3

Ich verwende Inline-Styles umfangreich in meinen React-Komponenten. Ich finde es so viel klarer, Styles innerhalb von Komponenten zu platzieren, weil immer klar ist, welche Styles die Komponente hat oder nicht hat. Außerdem vereinfacht die volle Leistung von Javascript bei komplexeren Style-Anforderungen wirklich.

Zuerst war ich nicht überzeugt, aber nachdem ich mich einige Monate damit beschäftigt habe, bin ich vollständig überzeugt und bin dabei, all meine CSS in Inline-Styles oder andere JS-gesteuerte CSS-Methoden umzuwandeln.

Diese Präsentation von dem Facebook-Mitarbeiter und React-Beitragenden "vjeux" ist auch sehr hilfreich — https://speakerdeck.com/vjeux/react-css-in-js

Answer 4

Das Styling in JSX ist sehr ähnlich dem Styling in HTML.

HTML Fall:

div style="background-color: red; color: white"

JSX Fall:

div style={{ backgroundColor: 'red', color: 'white' }}

Answer 5

Der Hauptzweck des Style-Attributs liegt in dynamischen, zustandsbasierten Stilen. Zum Beispiel könnten Sie einen Breitenstil auf einer Fortschrittsleiste basierend auf einem bestimmten Zustand haben oder die Position oder Sichtbarkeit basierend auf etwas anderem.

Styles in JS legen die Einschränkung fest, dass die Anwendung keine benutzerdefinierten Stile für ein wiederverwendbares Element bereitstellen kann. Dies ist in den zuvor genannten Situationen vollkommen akzeptabel, aber nicht, wenn sich die sichtbaren Eigenschaften ändern, insbesondere die Farbe.