Вметнување на податоци во атрибутот style од променливи во React

Во претходната лекција напишавме објект директно во атрибутот style. Можеме исто така да користиме вметнување на податоци во овој објект од променливи.

Да го земеме нашиот React компонент без CSS стилови:

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

Сега ќе креираме променливи и ќе им доделуваме вредности на CSS својствата. Да почнеме по ред со стиловите за div-от.

Во датотеката на компонентата пред командата return креирајме променлива wd1 и доделиме и ја вредноста '200px':

App.jsconst wd1 = '200px';

На сличен начин креирајме променливи за сите вредности на својствата на нашиот div:

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