Anwenden von Inline-Stilen in React

1. Inline-Stil in React
2. Bedingter Inline-Stil React

Das Styling von HTML-Elementen oder -Komponenten ist das Herzstück der Arbeit des Frontend-Entwicklers. Stile sind unerlässlich, um die richtige Platzierung und Darstellung des HTML-Elements sicherzustellen. React-Entwickler wenden Stile mit vielen verschiedenen Ansätzen an. Eine der beliebtesten Methoden ist die Verwendung von Inline-Stilen. Im heutigen Artikel wollten wir die Vor- und Nachteile der Verwendung von Inline-Stilen diskutieren.

Inline-Stil in React

React-Entwickler haben normalerweise einen bevorzugten Weg, ihre Komponenten zu gestalten. Einige erstellen separate CSS-Dateien für jede Komponente, während andere alle ihre Stile in einer Datei kombinieren. Wenn Sie Stile für eine gesamte Anwendung in einer Datei schreiben, gehen Ihnen wahrscheinlich die beschreibenden (und eindeutigen) Namen für Klassen aus.

Inline-Stildefinitionen ermöglichen es Ihnen, Komponenten zu stylen, ohne zwei separate Dateien für JavaScript und CSS zu erstellen. Auf diese Weise definierte Stile sind besser lesbar als globale CSS-Regeln, und wenn Sie sie verwenden, werden Sie weniger wahrscheinlich auf Namensprobleme stoßen.

Syntax

Inline-Stile in React funktionieren so, wie Sie es erwarten würden, wenn Sie sie in HTML verwendet haben. Genau wie in HTML werden Inline-Stile in React über das Attribut style festgelegt. Ähnlich wie bei HTML überschreiben Inline-Stile auch die Klassen in React.

Kommen wir nun zu den Unterschieden. Um Ihre Komponenten oder Elemente in JSX zu stylen, müssen Sie ein Objekt (oder einen Verweis auf ein Objekt) bereitstellen, das die Stile repräsentiert. Um sicherzustellen, dass JSX Ihr Stilobjekt entziffern kann, müssen Sie es in geschweifte Klammern setzen. So würde eine einfache Inline-Style-Deklaration aussehen:

<h1 style={{display: "none"}}>Hi! Try edit me</h1>;

In diesem Beispiel stellt die äußere Schicht aus geschweiften Klammern sicher, dass das darin enthaltene Objekt als JavaScript-Ausdruck ausgewertet wird.

In Bezug auf die Syntax besteht der wahrscheinlich größte Unterschied zwischen Inline-Stilen in React und HTML darin, dass Sie in React-Inline-Stilen keine regulären CSS-Eigenschaftsnamen verwenden können. Eigenschaften, die nur aus einem Wort bestehen, sind meist gleich, aber solche, die aus mehreren Wörtern bestehen, werden meist zu einem Wort zusammengefasst und in camelCase geschrieben. Zum Beispiel wird die Eigenschaft font-size in React-Stilen zu fontSize.

Im Wesentlichen werden Inline-Stile in React als Objekt dargestellt, mit Schlüssel-Wert-Paaren, die CSS-Eigenschaften und ihren Werten entsprechen. Ein Komma muss Schlüssel-Wert-Paare trennen; andernfalls erhalten Sie möglicherweise einen Fehler.

Bedingter Inline-Stil React

Ihr JSX-Code kann JavaScript-Objekte enthalten, die in gültige Stile kompiliert werden können. Dies ist eine äußerst nützliche Funktion, da wir Stile bedingt anwenden können. Wir können den ternären JavaScript-Operator innerhalb der geschweiften Klammern verwenden, um komplexe Bedingungen festzulegen, um die Fälle zu beschreiben, in denen die Stile gelten sollen.

Stellen wir uns vor, dass unsere Website ein dunkles und ein helles Thema hat. Wir können die Eigenschaft dark im state-Objekt der Komponente verwenden, um bedingt zwischen den beiden Themen zu wechseln. Hier ist ein Beispiel.

class App extends Component {
  constructor(props){
    super(props)
    this.state = {
      dark: false
    }
  }
  render() {
    return <div>
              <h1 style={{backgroundColor: this.state.dark ? "black" : "white", color: this.state.dark ? "white" : "black"}}>
                  Hi! Try edit me</h1>
              <button onClick={() => this.setState({dark: !this.state.dark})}>Switch</button>
           </div>;
  }
}

Das Obige ist eine einfache Demonstration, wie nützlich Inline-Stile sein können.

Im obigen Code-Snippet ist Ihnen vielleicht aufgefallen, dass unser Stilobjekt zu lang und schwer zu folgen ist. Anstatt das gesamte Objekt in die geschweiften Klammern zu schreiben, können wir es an anderer Stelle definieren und darauf verweisen. Wenn Sie feststellen, dass Ihr Inline-Stilobjekt zu viele Regeln enthält, verschieben Sie es außerhalb von JSX. Sie können eine Variable mit einem beschreibenden Namen erstellen, um das Stilobjekt zu speichern, und den Variablennamen verwenden, um darauf zu verweisen. Auf diese Weise sind Ihre Stile leichter zu lesen. Hier ist ein Beispiel.

class App extends Component {
  constructor(props){
    super(props)
    this.state = {
      dark: false
    }
  }
  render() {
    const darkThemeStyles = {
       backgroundColor: this.state.dark ? "black" : "white",
       color: this.state.dark ? "white" : "black"   
    }
    return <div>
              <h1 style={darkThemeStyles}>Hi! Try edit me</h1>
              <button onClick={() => this.setState({dark: !this.state.dark})}>Switch</button>
           </div>;
  }
}

Auf diese Weise ist der JSX-Code unter Ihrer return-Anweisung einfacher zu lesen und sieht viel sauberer aus.

Einige React-Entwickler lieben Inline-Stile, weil sie leicht lesbar sind und ihr Umfang auf eine einzelne Komponente beschränkt ist, anstatt global definiert zu sein. Personen, die an einer Komponente arbeiten, können leicht verstehen, wie die Komponente gestaltet ist.

Es gibt jedoch einige Fälle, in denen CSS noch nützlich ist. Zum Beispiel hat es :hover und viele andere Selektoren, die JavaScript nicht hat.