Einfügen von Daten in das style-Attribut aus Variablen in React

In der letzten Lektion haben wir das Objekt direkt im Attribut style geschrieben. Wir können auch die Daten für dieses Objekt aus Variablen einfügen.

Nehmen wir unsere React-Komponente ohne CSS-Stile:

App.jsfunction App() {
  return (
    <div>
      <p>text</p>
      <p>text</p>
      <p>text</p>
    </div>
  );
}

Jetzt werden wir Variablen erstellen und ihnen Werte für CSS-Eigenschaften zuweisen. Beginnen wir der Reihe nach mit den Stilen für das Div.

Erstellen wir in der Komponentendatei vor dem Befehl return eine Variable wd1 und weisen ihr den Wert '200px' zu:

App.jsconst wd1 = '200px';

Auf ähnliche Weise erstellen wir Variablen für alle Eigenschaftswerte unseres Divs:

App.jsconst wd1 = '200px';
const br1 = '2px solid brown';
const pd1 = '10px';
const ta1 = 'center';

Fügen wir nun Variablen für den ersten Absatz hinzu:

App.jsconst co1 = 'orangered';
const fw1 = 'bold';

Für den zweiten Absatz:

App.jsconst fs1 = 'italic';
const co2 = 'brown';

Und schließlich für den letzten. Hier werden nur zwei, nicht drei Variablen benötigt. Es hat keinen Sinn, sich zu wiederholen, da der Wert bold bereits für den ersten Absatz vorhanden ist:

App.jsconst bco1 = 'orange';
const co3 = 'white';

Und jetzt setzen wir die Variablen mit den Stilwerten ein. Machen wir das für den ersten Absatz. Fügen wir die Variablen co1 und fw1 anstelle der Werte in das Objekt ein:

App.js<p style = {{ color: co1, fontWeight: fw1 }}>
  text
</p>

Verfahren wir auf ähnliche Weise mit den restlichen Tags.

Das Ergebnis: Der Code unserer Komponente wird so aussehen:

App.jsfunction App() {

  //für div:
  const wd1 = '200px';
  const br1 = '2px solid brown';
  const pd1 = '10px';
  const ta1 = 'center';

  //für das erste p:
  const co1 = 'orangered';
  const fw1 = 'bold';

  //für das zweite p:
  const fs1 = 'italic';
  const co2 = 'brown';
  
  //für das dritte p:
  const bco1 = 'orange';
  const co3 = 'white';

  return (
    <div style = {{
      width: wd1,
      border: br1,
      padding: pd1,
      textAlign: ta1 }}>
      <p style = {{ color: co1, fontWeight: fw1 }}>
        text
      </p>
      <p style = {{ fontStyle: fs1, color: co2 }}>
        text
      </p>
      <p style = {{ 
        backgroundColor: bco1,
        fontWeight: fw1,
        color: co3 }}>
        text
      </p>
    </div>
  );
}