Reactда ўзгарувчилардан style атрибутига маълумотларни қўйиш

Ўтган дарсликда биз объектни тўғри style атрибутига ёзган эдик. Биз шундан ташқари ўзгарувчилардан маълумотларни ушбу объектга қўйишни ҳам қўллашимиз мумкин.

Келгила, CSS стилларис React компонентимизни олиб кўрайлик:

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