Reactте өзгөрмөлөрдөн маалыматты style атрибутуна киргизүү

Акыркы сабакта биз объектти түз эле style атрибутуна жазганбыз. Биз бул объектке өзгөрмөлөрдөн маалымат киргизүүнү да колдоно алабыз.

Келгиле, CSS стилдери жок React компонентибизди алып көрөлү:

function App() {
	return (
		<div>
			<p>текст</p>
			<p>текст</p>
			<p>текст</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 }}>
	текст
</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 }}>
				текст
			</p>
			<p style = {{ fontStyle: fs1, color: co2 }}>
				текст
			</p>
			<p style = {{ 
				backgroundColor: bco1,
				fontWeight: fw1,
				color: co3 }}>
				текст
			</p>
		</div>
	);
}

Өткөн сабактагы маселеге чечимдин кодуна CSS касиеттеринин маанилери өзгөрмөлөрдө сактала тургандай өзгөртүү жасагыла.