React වල ඇති විචල්යයන්ගෙන් දත්ත style ගුණාංගයට ඇතුල් කිරීම

පසුගිය පාඩමේදී අපි වස්තුවක් කෙලින්ම style ගුණාංගය තුළ ලිව්වෙමු. විචල්යයන්ගෙන් දත්ත ඇතුළු කිරීම මෙම වස්තුවට අපට භාවිතා කළ හැකිය.

CSS විලාස නොමැති අපගේ React සංරචකය අපි ගනිමු:

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

දැන් අපි විචල්යයන් සාදා ඒවාට CSS ගුණ වල අගයන් පවරමු. div සඳහා වන විලාස වලින් පටන් ගනිමු.

return විධානයට පෙර සංරචක ගොනුවේ wd1 යන විචල්යය සාදා එයට '200px' අගය පවරමු:

const wd1 = '200px';

අපගේ div සඳහා වන සියලුම ගුණ වල අගයන් සඳහා ඒ හා සමානව විචල්යයන් සාදමු:

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 ගුණ වල අගයන් විචල්යයන් තුළ ගබඩා වේ.