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 प्रॉपर्टीज़ के वैल्यूज़ वेरिएबल्स में स्टोर हों।