React တွင် variable များမှ style attribute ထဲသို့ အချက်အလက်များ ထည့်သွင်းခြင်း

ပြီးခဲ့သော သင်ခန်းစာတွင် ကျွန်ုပ်တို့သည် object ကို style attribute ထဲတွင် တိုက်ရိုက်ရေးခဲ့ကြသည်။ ထို့အပြင် ကျွန်ုပ်တို့သည် variable များမှ ဤ object ထဲသို့ အချက်အလက်များ ထည့်သွင်းခြင်းကို အသုံးပြု၍ရသည်။

CSS style မပါသော ကျွန်ုပ်တို့၏ React component ကို ယူကြပါစို့။

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

ယခု ကျွန်ုပ်တို့သည် variable များကို ဖန်တီးပြီး ၎င်းတို့အား CSS property တန်ဖိုးများ သတ်မှတ်ပေးမည်။ div အတွက် style များဖြင့် အစဉ်အတိုင်း စတင်ပါမည်။

Component ဖိုင်ထဲတွင် return command မတိုင်မီ variable wd1 ကို ဖန်တီးကာ ၎င်းအား တန်ဖိုး '200px' သတ်မှတ်ပေးပါမည်။

App.jsconst wd1 = '200px';

အလားတူပင် ကျွန်ုပ်တို့၏ div အတွက် property တန်ဖိုးများ အားလုံးအတွက် variable များကို ဖန်တီးပါမည်။

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

ယခု ပထမအပိုဒ်အတွက် variable များကို ထည့်သွင်းပါမည်။

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

ဒုတိယအပိုဒ်အတွက်။

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

နောက်ဆုံးအတွက်လည်း ထိုနည်းတူစွာပင်။ ဤနေရာတွင် variable သုံးခုမလိုအပ်ပါ။ ထပ်တူပြုရန် အဓိပ္ပာယ်မရှိပါ။ အကြောင်းမှာ တန်ဖိုး bold သည် ပထမအပိုဒ်အတွက် ကျွန်ုပ်တို့တွင် ရှိနှင့်ပြီးဖြစ်သည်။

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

ယခု ကျွန်ုပ်တို့သည် style တန်ဖိုးများပါသော variable များကို အစားထိုးသွင်းမည်။ ပထမအပိုဒ်အတွက် ပြုလုပ်ကြပါစို့။ Variable များ co1 နှင့် fw1 ကို object ထဲရှိ တန်ဖိုးများနေရာတွင် ထည့်သွင်းမည်။

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

အလားတူပင် ကျန်ရှိသော tag များအတွက်လည်း ဆောင်ရွက်ပါမည်။

ရလဒ်အနေဖြင့် ကျွန်ုပ်တို့၏ component code သည် အောက်ပါအတိုင်း ဖြစ်လာမည်။

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>
  );
}