ReactJS-এ ডাইনামিকভাবে কন্টেন্ট রেন্ডার করার জন্য অনেক সময় শর্তাধীন (conditional) রেন্ডারিং ব্যবহার করা হয়। এই শর্তাধীন রেন্ডারিং করতে আমরা সাধারণত If-Else, Ternary Operator, এবং Logical AND (&&) ব্যবহার করি। এগুলো React-এর JSX কোডে কন্ডিশনাল রেন্ডারিংয়ের জন্য জনপ্রিয় পদ্ধতি। চলুন, এই তিনটি পদ্ধতির ব্যবহার দেখবো।
১. If-Else ব্যবহৃত JSX এ
ReactJS-এ যদি আপনি If-Else ব্যবহার করতে চান, তবে এটি সরাসরি JSX এর মধ্যে লিখা যায় না, কারণ JSX এক্সপ্রেশনগুলো সাধারণত এক লাইনে লেখা হয়। তবে, আপনি এটি কম্পোনেন্টের রেন্ডার মেথডের মধ্যে বা ফাংশনের বাইরে ব্যবহার করতে পারেন।
উদাহরণ:
function Greeting(props) {
let message;
if (props.isLoggedIn) {
message = <h1>Welcome back, {props.name}!</h1>;
} else {
message = <h1>Please log in.</h1>;
}
return message;
}
এখানে, If-Else লজিক ব্যবহার করে আমরা কন্ডিশন অনুযায়ী ভিন্ন ভিন্ন UI রেন্ডার করছি। isLoggedIn প্রপসের মান অনুযায়ী "Welcome back" বা "Please log in" বার্তা দেখানো হবে।
২. Ternary Operator
ReactJS-এ Ternary Operator হল একটি এক লাইনের শর্তীয় রেন্ডারিং কৌশল, যা সাধারণত যদি আপনি একাধিক শর্তের মধ্যে সিলেক্ট করতে চান। এটি condition ? true : false ফরম্যাটে কাজ করে। JSX কোডে এটি সহজে ব্যবহার করা যায় এবং বেশি পঠনযোগ্য হয়।
উদাহরণ:
function Greeting(props) {
return (
<h1>{props.isLoggedIn ? `Welcome back, ${props.name}!` : "Please log in."}</h1>
);
}
এখানে, Ternary Operator ব্যবহার করা হয়েছে isLoggedIn প্রপসের মান পরীক্ষা করতে, এবং তার ভিত্তিতে ভিন্ন ভিন্ন টেক্সট রেন্ডার করা হচ্ছে। এই কোডে isLoggedIn সত্য হলে "Welcome back" বার্তা, আর যদি মিথ্যা হয় তবে "Please log in" বার্তা দেখানো হবে।
৩. Logical AND (&&) অপারেটর
ReactJS-এ Logical AND (&&) অপারেটরটি সাধারণত তখন ব্যবহার করা হয় যখন আপনি শর্তসাপেক্ষে কিছু রেন্ডার করতে চান, কিন্তু শুধুমাত্র একটি শর্ত পুরণ হলে। এটি যদি শর্ত সত্য হয়, তবে পরবর্তী অংশটি রেন্ডার করবে। অন্যথায় কিছুই রেন্ডার হবে না।
উদাহরণ:
function Greeting(props) {
return (
<div>
{props.isLoggedIn && <h1>Welcome back, {props.name}!</h1>}
</div>
);
}
এখানে, props.isLoggedIn যদি সত্য হয়, তাহলে "Welcome back" বার্তা রেন্ডার হবে, এবং যদি মিথ্যা হয়, তাহলে কিছুই রেন্ডার হবে না। Logical AND অপারেটরটি মূলত true && JSX স্টাইলের শর্তাবলীতে ব্যবহৃত হয়, যেখানে শুধু শর্ত সত্য হলে JSX অংশটি রেন্ডার হয়।
কোন পরিস্থিতিতে কোন পদ্ধতি ব্যবহার করবেন?
- If-Else: আপনি যখন অনেক শর্তের ভিত্তিতে আলাদা আলাদা JSX ব্লক রেন্ডার করতে চান, তখন If-Else ব্যবহার করা সবচেয়ে উপযুক্ত। এটি বড় এবং জটিল শর্তগুলির জন্য কার্যকর।
- Ternary Operator: আপনি যখন একটি বা দুটি শর্তের ভিত্তিতে দ্রুত এবং সরলভাবে রেন্ডার করতে চান, তখন Ternary Operator ব্যবহার করুন। এটি ছোট এবং পরিষ্কার শর্তাবলী জন্য আদর্শ।
- Logical AND (&&): আপনি যখন একটি একক শর্তের ভিত্তিতে একটি JSX এলিমেন্ট রেন্ডার করতে চান, এবং শর্ত মিথ্যা হলে কিছুই রেন্ডার হবে না, তখন Logical AND (&&) ব্যবহার করুন। এটি ঐ situatons-এ খুব কার্যকর।
সারাংশ
ReactJS-এ If-Else, Ternary Operator, এবং Logical AND (&&) ব্যবহার করে শর্তসাপেক্ষ রেন্ডারিং করা যায়, যা অ্যাপ্লিকেশনের UI কে ডাইনামিক এবং ইন্টারেক্টিভ করে তোলে। এই তিনটি পদ্ধতির মধ্যে Ternary Operator ও Logical AND সাধারণত ছোট এবং সরল শর্তাবলীর জন্য ব্যবহৃত হয়, যেখানে If-Else বেশি জটিল শর্তগুলির জন্য উপযুক্ত।
Read more
