Дар React аз тағирёбандаҳо ба атрибути style ворид кардани маълумот

Дар дарси гузашта мо объектро рост дар атрибути style менавистем. Мо инчунин метавонем аз тағирёбандаҳо ба ин объект ворид кардани маълумотро истифода барем.

Биёед компоненти React-и худро бе услубҳои CSS гирем:

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 дар тағирёбандаҳо нигоҳ дошта шаванд.