Futja e të dhënave në atributin style nga variablat në React

Në mësimin e kaluar ne shkruajtëm një objekt direkt në atributin style. Ne gjithashtu mund të përdorim futje të dhënash në këtë objekt nga variablat.

Le të marrim komponentin tonë React pa stile CSS:

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

Tani do të krijojmë variabla dhe t'u caktojmë atyre vlera të vetive CSS. Le të fillojmë me radhë me stilet për div.

Në skedarin e komponentit para komandës return le të krijojmë variablin wd1 dhe t'i caktojmë vlerën '200px':

App.jsconst wd1 = '200px';

Në mënyrë të ngjashme le të krijojmë variabla për të gjitha vlerat e vetive të div-it tonë:

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

Tani le të shtojmë variabla për paragrafin e parë:

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

Për paragrafin e dytë:

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

Dhe, së fundmi, për të fundit. Këtu do të nevojiten vetëm dy, jo tre variabla. Nuk ka kuptim të përsëritemi, sepse vlera bold ne tashmë e kemi për paragrafin e parë:

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

Tani ne do t'i zëvendësojmë variablat me vlerat e stileve. Le ta bëjmë këtë për paragrafin e parë. Le të fusim variablat co1 dhe fw1 në vend të vlerave në objekt:

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

Në mënyrë të ngjashme do të veprojmë me etiketat e mbetura.

Si rezultat, kodi i komponentit tonë do të duket kështu:

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