Gegevens invoegen in het style attribuut vanuit variabelen in React

In de vorige les schreven we het object direct in het attribuut style. We kunnen ook gegevensinvoeging in dit object vanuit variabelen gebruiken.

Laten we onze React-component zonder CSS-stijlen nemen:

function App() {
	return (
		<div>
			<p>tekst</p>
			<p>tekst</p>
			<p>tekst</p>
		</div>
	);
}

Nu gaan we variabelen maken en er waarden van CSS-eigenschappen aan toewijzen. Laten we beginnen met de stijlen voor de div.

In het componentbestand, vóór de opdracht return, maken we de variabele wd1 aan en wijzen we er de waarde '200px' aan toe:

const wd1 = '200px';

Op een vergelijkbare manier maken we variabelen voor alle eigenschapswaarden van onze div:

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

Nu voegen we variabelen toe voor de eerste alinea:

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

Voor de tweede alinea:

const fs1 = 'italic';
const co2 = 'brown';

En tenslotte voor de laatste. Hier zijn er slechts twee, in plaats van drie variabelen nodig. Het heeft geen zin om te herhalen, aangezien de waarde bold we al hebben voor de eerste alinea:

const bco1 = 'orange';
const co3 = 'white';

En nu zullen we de variabelen met de stijlwaarden invullen. Laten we dit doen voor de eerste alinea. We voegen de variabelen co1 en fw1 in in plaats van de waarden in het object:

<p style = {{ color: co1, fontWeight: fw1 }}>
	tekst
</p>

Op een vergelijkbare manier gaan we om met de overige tags.

Uiteindelijk ziet onze componentcode er als volgt uit:

function App() {
	const wd1 = '200px';
	const br1 = '2px solid brown';
	const pd1 = '10px';
	const ta1 = 'center';

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

	const fs1 = 'italic';
	const co2 = 'brown';
	
	const bco1 = 'orange';
	const co3 = 'white';

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

Pas de code van de oplossing voor de opgave uit de vorige les aan, zodat de waarden van de CSS-eigenschappen in variabelen worden opgeslagen.