React-এ কম্পোনেন্ট প্রপস

পূর্ববর্তী পাঠে আমরা বেশ কয়েকটি পণ্যের উদাহরণ দেখিয়েছি:

jsxfunction App() {
  return <div>
    <Product />
    <Product />
    <Product />
  </div>;
}

এখন পর্যন্ত প্রতিটি পণ্য ট্যাগ কল স্ক্রিনে একই জিনিস দেখায়। এখন আসুন প্রতিটি পণ্যকে অনন্য করি।

ধরুন, প্রতিটি পণ্যের একটি নাম এবং একটি মূল্য থাকতে হবে। আসুন এমন করি যাতে প্রতিটি পণ্য ট্যাগ কল আমাদের প্রয়োজনীয় মার্কআপে তাদের নিজস্ব নাম এবং মূল্য সহ পণ্য দেখায়।

এটি করার জন্য আমাদের কয়েকটি ধাপ অনুসরণ করতে হবে।

প্রথমত, পণ্য ট্যাগ কল করার সময়, আমরা এই ট্যাগে দুটি অ্যাট্রিবিউট লিখব: পণ্যের নাম সহ name অ্যাট্রিবিউট এবং মূল্য সহ cost অ্যাট্রিবিউট, এভাবে:

jsxfunction App() {
  return <div>
    <Product name="product1" cost="100" />
    <Product name="product2" cost="200" />
    <Product name="product3" cost="300" />
  </div>;
}

এই অ্যাট্রিবিউটগুলির নাম এবং মানগুলি আমাদের Product কম্পোনেন্টের কনস্ট্রাক্টর ফাংশনের প্রথম প্যারামিটারে একটি অবজেক্ট হিসাবে পৌঁছাবে:

jsxfunction Product(props) {
  console.log(props); // name এবং cost কী সহ অবজেক্ট
  
  return <p>
    product
  </p>;
}

প্যারামিটারের নাম যেকোনো কিছু হতে পারে, কিন্তু React-এ এটিকে props নামে ডাকার রীতি। বাস্তবে এটি শুধু একটি প্যারামিটারের নামই নয়, বরং React-এর একটি গুরুত্বপূর্ণ ধারণা।

এই ধারণার সারমর্ম হল নিম্নরূপ: একটি কম্পোনেন্ট ট্যাগ কল করার সময়, ডেটা সহ অ্যাট্রিবিউটগুলি এই ট্যাগে লেখা যেতে পারে। এই ডেটা কম্পোনেন্টের প্রপস-এ পৌঁছাবে। এরপর কম্পোনেন্ট এই ডেটা ব্যবহার করতে পারে, উদাহরণস্বরূপ, প্রয়োজনীয় মার্কআপ তৈরি করার জন্য।

আসুন এটি করা যাক:

jsxfunction Product(props) {
  return <p>
    name: <span>{props.name}</span>,
    cost: <span>{props.cost}</span>
  </p>;
}

আরও সুবিধাজনক এবং আরও স্বীকৃত পদ্ধতি হল props অবজেক্ট ব্যবহার না করে, বরং সরাসরি ফাংশনের প্যারামিটারেই ডেস্ট্রাকচারিং করা:

jsxfunction Product({ name, cost }) {
  return <p>
    name: <span>{name}</span>,
    cost: <span>{cost}</span>
  </p>;
}