Datu ievietošana style atribūtā no mainīgajiem React

Iepriekšējā nodarbībā mēs rakstījām objektu tieši atribūtā style. Mēs varam arī izmantot datu ievietošanu šajā objektā no mainīgajiem.

Paņemsim mūsu React komponentu bez CSS stiliem:

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

Tagad mēs izveidosim mainīgos un piešķirsim tiem CSS īpašību vērtības. Sāksim pēc kārtas ar stiliem div.

Komponenta failā pirms komandas return izveidosim mainīgo wd1 un piešķirsim tam vērtību '200px':

App.jsconst wd1 = '200px';

Līdzīgā veidā izveidosim mainīgos visām mūsu div īpašību vērtībām:

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

Tagad pievienosim mainīgos pirmajai rindkopai:

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

Otrajai rindkopai:

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

Un, visbeidzot, pēdējai. Šeit būs nepieciešami tikai divi, nevis trīs mainīgie. Nav jēgas atkārtoties, jo vērtība bold mums jau ir pieejama pirmajai rindkopai:

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

Un tagad mēs ievietosim mainīgos ar stilu vērtībām. Darīsim to pirmajai rindkopai. Ievietosim mainīgos co1 un fw1 vērtību vietā objektā:

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

Līdzīgā veidā rīkosimies ar pārējām atlom.

Rezultātā mūsu komponenta kods izskatīsies šādi:

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