React में वेरिएबल्स से डेटा को style एट्रिब्यूट में इन्सर्ट करना

पिछले पाठ में हमने ऑब्जेक्ट को सीधे style एट्रिब्यूट में लिखा था। हम वेरिएबल्स से इस ऑब्जेक्ट में डेटा इन्सर्ट करने का भी उपयोग कर सकते हैं।

आइए हमारा React कंपोनेंट लेते हैं बिना CSS स्टाइल्स के:

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

अब हम वेरिएबल्स बनाएंगे और उन्हें CSS प्रॉपर्टीज़ के वैल्यूज़ असाइन करेंगे। आइए डिव के लिए स्टाइल्स के साथ क्रमशः शुरू करते हैं।

कंपोनेंट फाइल में return कमांड से पहले वेरिएबल wd1 बनाएंगे और उसे वैल्यू '200px' असाइन करेंगे:

App.jsconst wd1 = '200px';

इसी तरह हमारे डिव के सभी प्रॉपर्टीज़ के वैल्यूज़ के लिए वेरिएबल्स बनाएंगे:

App.jsconst wd1 = '200px';
const br1 = '2px solid brown';
const pd1 = '10px';
const ta1 = 'center';

अब पहले पैराग्राफ के लिए वेरिएबल्स जोड़ते हैं:

App.jsconst co1 = 'orangered';
const fw1 = 'bold';

दूसरे पैराग्राफ के लिए:

App.jsconst fs1 = 'italic';
const co2 = 'brown';

और, अंत में आखिरी के लिए। यहाँ सिर्फ दो की जरूरत है, तीन की नहीं। दोहराने का कोई मतलब नहीं है, क्योंकि bold का वैल्यू हमारे पास पहले से ही पहले पैराग्राफ के लिए है:

App.jsconst bco1 = 'orange';
const co3 = 'white';

और अब हम स्टाइल वैल्यूज़ वाले वेरिएबल्स को सब्स्टिट्यूट करेंगे। आइए, इसे पहले पैराग्राफ के लिए करते हैं। co1 और fw1 वेरिएबल्स को ऑब्जेक्ट में वैल्यूज़ की जगह इन्सर्ट करते हैं:

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

इसी तरह बाकी टैग्स के साथ करेंगे।

परिणामस्वरूप हमारा कंपोनेंट कोड ऐसा दिखेगा:

App.jsfunction 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>
  );
}