Data-invoeging in die style-kenmerk uit veranderlikes in React

In die vorige les het ons die voorwerp direk in die style-kenmerk geskryf. Ons kan ook data-invoeging in hierdie voorwerp uit veranderlikes gebruik.

Kom ons neem ons React-komponent sonder CSS-style:

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

Ons gaan nou veranderlikes skep en waardes van CSS-eienskappe daaraan toewys. Kom ons begin in volgorde met style vir die div.

In die komponentlêer, voor die return-opdrag, skep ons 'n veranderlike wd1 en wys die waarde '200px' daaraan toe:

App.jsconst wd1 = '200px';

Op 'n soortgelyke manier skep ons veranderlikes vir al die waarde-eienskappe van ons div:

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

Voeg nou veranderlikes by vir die eerste paragraaf:

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

Vir die tweede paragraaf:

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

En laastens, vir die laaste een. Hier sal ons net twee, nie drie veranderlikes nodig hê nie. Dit maak nie sin om te herhaal nie, aangesien die waarde bold wat ons reeds vir die eerste paragraaf het:

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

En nou sal ons die veranderlikes met stylwaardes invoeg. Kom ons doen dit vir die eerste paragraaf. Laat ons die veranderlikes co1 en fw1 inplaas van die waardes in die voorwerp invoeg:

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

Op 'n soortgelyke manier doen ons dit met die oorblywende etikette.

As gevolg hiervan sal ons komponentkode so lyk:

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