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