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:

function 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:

const wd1 = '200px';

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

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

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

const co1 = 'orangered';
const fw1 = 'bold';

Für den zweiten Absatz:

const 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:

const 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:

<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:

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

Modifizieren Sie den Code der Lösungsaufgabe aus der letzten Lektion so, dass die Werte der CSS-Eigenschaften in Variablen gespeichert werden.