React වල ඇති විචල්යයන්ගෙන් දත්ත style ගුණාංගයට ඇතුල් කිරීම

පසුගිය පාඩමේදී අපි වස්තුවක් කෙලින්ම style ගුණාංගය තුළ ලිව්වෙමු. විචල්යයන්ගෙන් දත්ත ඇතුළු කිරීම මෙම වස්තුවට අපට භාවිතා කළ හැකිය.

CSS විලාස නොමැති අපගේ React සංරචකය අපි ගනිමු:

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