Datu ievietošana style atribūtā no mainīgajiem React

Iepriekšējā nodarbībā mēs rakstījām objektu tieši atribūtā style. Mēs varam arī izmantot datu ievietošanu šajā objektā no mainīgajiem.

Paņemsim mūsu React komponentu bez CSS stiliem:

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

Tagad mēs izveidosim mainīgos un piešķirsim tiem CSS īpašību vērtības. Sāksim pēc kārtas ar stiliem div.

Komponenta failā pirms komandas return izveidosim mainīgo wd1 un piešķirsim tam vērtību '200px':

const wd1 = '200px';

Līdzīgā veidā izveidosim mainīgos visām mūsu div īpašību vērtībām:

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

Tagad pievienosim mainīgos pirmajai rindkopai:

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

Otrajai rindkopai:

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

Un, visbeidzot, pēdējai. Šeit būs nepieciešami tikai divi, nevis trīs mainīgie. Nav jēgas atkārtoties, jo vērtība bold mums jau ir pieejama pirmajai rindkopai:

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

Un tagad mēs ievietosim mainīgos ar stilu vērtībām. Darīsim to pirmajai rindkopai. Ievietosim mainīgos co1 un fw1 vērtību vietā objektā:

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

Līdzīgā veidā rīkosimies ar pārējām atlom.

Rezultātā mūsu komponenta kods izskatīsies šādi:

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

Modificējiet uzdevuma risinājuma kodu no iepriekšējās nodarbības tā, lai CSS īpašību vērtības glabātos mainīgajos.