Innsetting av data i style-attributtet fra variabler i React

I forrige leksjon skrev vi et objekt direkte i attributtet style. Vi kan også bruke innsetting av data i dette objektet fra variabler.

La oss ta React-komponenten vår uten CSS-stiler:

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

Nå skal vi opprette variabler og tildele dem verdier for CSS-egenskaper. La oss starte med stilene for div-en.

I komponentfilen, før kommandoen return, oppretter vi variabelen wd1 og tildeler den verdien '200px':

const wd1 = '200px';

På samme måte oppretter vi variabler for alle egenskapsverdiene til div-en vår:

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

Nå legger vi til variabler for det første avsnittet:

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

For det andre avsnittet:

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

Og til slutt for det siste. Her trengs bare to, ikke tre variabler. Det er ikke vits i å gjenta, siden verdien bold allerede finnes for det første avsnittet:

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

Og nå skal vi erstatte variablene med stilverdiene. La oss gjøre dette for det første avsnittet. Vi setter inn variablene co1 og fw1 i stedet for verdiene i objektet:

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

Vi gjør det samme med de andre taggene.

Som et resultat vil komponentkoden vår se slik ut:

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 }}>
				text
			</p>
			<p style = {{ fontStyle: fs1, color: co2 }}>
				text
			</p>
			<p style = {{ 
				backgroundColor: bco1,
				fontWeight: fw1,
				color: co3 }}>
				text
			</p>
		</div>
	);
}

Modifiser kodeløsningen til oppgaven fra forrige leksjon slik at verdiene for CSS-egenskaper lagres i variabler.