Reactда ўзгарувчилардан style атрибутига маълумотларни қўйиш

Ўтган дарсликда биз объектни тўғри style атрибутига ёзган эдик. Биз шундан ташқари ўзгарувчилардан маълумотларни ушбу объектга қўйишни ҳам қўллашимиз мумкин.

Келгила, CSS стилларис React компонентимизни олиб кўрайлик:

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

Ҳозир биз ўзгарувчилар яратиб, уларга CSS хусусиятларининг қийматларини белгилаймиз. Див учун стиллардан бошлаймиз.

Компонент файлида return буйруги олдида wd1 ўзгарувчисини яратиб, унга '200px' қийматини белгилаймиз:

const wd1 = '200px';

Шунинг ўхшаш тарзда биз дивимиз учун барча хусусиятлар қийматлари учун ўзгарувчилар яратамиз:

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';

Ва, ниҳоят, охиргиси учун. Бу ерда фақат иккита, учта эмас, ўзгарувчи керак бўлади. Такрорлашнинг маъноси йўқ, чунки bold қиймати биринчи абзац учун аллақачон мавжуд:

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

Энди биз стил қийматлари билан ўзгарувчиларни қўйамиз. Келгила, биринчи абзац учун қилайлик. Объектдаги қийматлар ўрнига co1 ва fw1 ўзгарувчиларини қўйамиз:

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

Қолган теглар учун ҳам шунинг ўхшаш қиламиз.

Натижада бизнинг компонент коди шундай кўринади:

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

Ўтган дарсликдаги масала ечимини модификация қилинг, CSS хусусиятларининг қийматлари ўзгарувчиларда сақлансин.