Data-invoeging in die style-kenmerk uit veranderlikes in React

In die vorige les het ons die voorwerp direk in die style-kenmerk geskryf. Ons kan ook data-invoeging in hierdie voorwerp uit veranderlikes gebruik.

Kom ons neem ons React-komponent sonder CSS-style:

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

Ons gaan nou veranderlikes skep en waardes van CSS-eienskappe daaraan toewys. Kom ons begin in volgorde met style vir die div.

In die komponentlêer, voor die return-opdrag, skep ons 'n veranderlike wd1 en wys die waarde '200px' daaraan toe:

const wd1 = '200px';

Op 'n soortgelyke manier skep ons veranderlikes vir al die waarde-eienskappe van ons div:

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

Voeg nou veranderlikes by vir die eerste paragraaf:

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

Vir die tweede paragraaf:

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

En laastens, vir die laaste een. Hier sal ons net twee, nie drie veranderlikes nodig hê nie. Dit maak nie sin om te herhaal nie, aangesien die waarde bold wat ons reeds vir die eerste paragraaf het:

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

En nou sal ons die veranderlikes met stylwaardes invoeg. Kom ons doen dit vir die eerste paragraaf. Laat ons die veranderlikes co1 en fw1 inplaas van die waardes in die voorwerp invoeg:

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

Op 'n soortgelyke manier doen ons dit met die oorblywende etikette.

As gevolg hiervan sal ons komponentkode so lyk:

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

Wysig die kode van die oplossing vir die vorige les sodat die waardes van CSS-eienskappe in veranderlikes gestoor word.