Дар 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>
  );
}