Props এর জন্য ডিফল্ট মান এবং Validation

Riot.js-এ Props হল একটি কম্পোনেন্টে পাস করা ডেটা, যা মূলত সেই কম্পোনেন্টের ইনপুট হিসেবে কাজ করে। Props সাধারণত কম্পোনেন্টের বাইরের ডেটা বা পারেন্ট কম্পোনেন্টের থেকে নেয়া হয় এবং এটি কম্পোনেন্টের ভিতরে ব্যবহৃত হয়।

Props এর জন্য ডিফল্ট মান সেট করা এবং ভ্যালিডেশন (validation) নিশ্চিত করা, কোডের নির্ভরযোগ্যতা এবং রক্ষণাবেক্ষণযোগ্যতা নিশ্চিত করতে গুরুত্বপূর্ণ।

১. Props এর জন্য ডিফল্ট মান (Default Values):

Riot.js-এ, আপনি একটি prop এর জন্য ডিফল্ট মান সেট করতে পারেন, যাতে কম্পোনেন্টের বাইরে থেকে কোনো মান না পাঠানো হলে, ডিফল্ট মান ব্যবহার করা হয়।

এটি করার জন্য, আপনাকে opts অবজেক্ট ব্যবহার করতে হবে, যেটি কম্পোনেন্টে পাস করা প্রপার্টি ধারণ করে। আপনি onMounted() মেথডে ডিফল্ট মান প্রদান করতে পারেন অথবা সরাসরি destructuring assignment ব্যবহার করতে পারেন।

ডিফল্ট মানের উদাহরণ:

<!-- DefaultProps.riot -->
<default-props>
  <h1>{opts.title}</h1>
  <p>{opts.message}</p>

  <script>
    export default {
      onMounted() {
        // Set default values if props are not provided
        this.opts.title = this.opts.title || 'Default Title';
        this.opts.message = this.opts.message || 'This is a default message.';
      }
    }
  </script>
</default-props>

ব্যাখ্যা:

• এখানে, opts.title এবং opts.message এর জন্য ডিফল্ট মান দেয়া হয়েছে। যদি কোনও মান পাস না করা হয়, তবে 'Default Title' এবং 'This is a default message.' ব্যবহার হবে।

২. Props এর জন্য ভ্যালিডেশন (Validation):

Props এর জন্য ভ্যালিডেশন নিশ্চিত করতে, আপনি prop types যাচাই করতে পারেন। Riot.js নিজে সরাসরি prop validation সমর্থন করে না, তবে আপনি JavaScript কোড ব্যবহার করে এই validation করতে পারেন।

ভ্যালিডেশন করার উদাহরণ:

<!-- PropsValidation.riot -->
<props-validation>
  <h1>{opts.title}</h1>
  <p>{opts.message}</p>

  <script>
    export default {
      onMounted() {
        // Validate the props
        this.validateProps();
      },

      validateProps() {
        if (typeof this.opts.title !== 'string') {
          console.error('Invalid prop: title should be a string');
        }
        if (typeof this.opts.message !== 'string') {
          console.error('Invalid prop: message should be a string');
        }
      }
    }
  </script>
</props-validation>

ব্যাখ্যা:

• এখানে, validateProps() মেথডটি opts.title এবং opts.message এর টাইপ চেক করে। যদি এগুলি সঠিক টাইপের না হয়, তাহলে একটি কনসোল এরর মেসেজ দেখাবে।
• আপনি এই ধরনের ভ্যালিডেশন ফাংশনগুলোকে কম্পোনেন্টের onMounted() ফাংশনে বা যখন Props পাস করা হবে তখন কল করতে পারেন।

৩. Props এর ডিফল্ট মান এবং ভ্যালিডেশন একসাথে:

আপনি ডিফল্ট মান এবং ভ্যালিডেশন একত্রে ব্যবহার করতে পারেন, যাতে Props সঠিক মানে প্রবাহিত হয় এবং ডিফল্ট মান ব্যবহৃত হয় যদি কোন মান প্রদান না করা হয়।

<!-- DefaultAndValidation.riot -->
<default-and-validation>
  <h1>{opts.title}</h1>
  <p>{opts.message}</p>

  <script>
    export default {
      onMounted() {
        // Set default values if props are not provided
        this.opts.title = this.opts.title || 'Default Title';
        this.opts.message = this.opts.message || 'This is a default message.';
        
        // Validate the props
        this.validateProps();
      },

      validateProps() {
        if (typeof this.opts.title !== 'string') {
          console.error('Invalid prop: title should be a string');
        }
        if (typeof this.opts.message !== 'string') {
          console.error('Invalid prop: message should be a string');
        }
      }
    }
  </script>
</default-and-validation>

ব্যাখ্যা:

• এখানে, প্রথমে ডিফল্ট মান সেট করা হয়েছে যদি Props প্রদান না করা হয়।
• তারপরে, validateProps() ফাংশনটি Props এর ধরন (data type) যাচাই করবে এবং সঠিক না হলে একটি কনসোল এরর দেখাবে।

৪. Type Checking (অপশনাল):

যদিও Riot.js সরাসরি prop-types বা TypeScript এর মতো প্রপার্টি টাইপ চেকিং সাপোর্ট করে না, আপনি JavaScript বা TypeScript ব্যবহার করে কোডের মধ্যে টাইপ চেকিং বা ভ্যালিডেশন যুক্ত করতে পারেন।

TypeScript Example:

যদি আপনি Riot.js এর সাথে TypeScript ব্যবহার করেন, আপনি Props এর টাইপ সুনির্দিষ্টভাবে ঘোষণা করতে পারেন:

// Example of TypeScript with Riot.js
<default-and-validation>
  <h1>{opts.title}</h1>
  <p>{opts.message}</p>

  <script lang="ts">
    export default {
      opts: {
        title: String,
        message: String
      },

      onMounted() {
        this.opts.title = this.opts.title || 'Default Title';
        this.opts.message = this.opts.message || 'Default message';
      }
    }
  </script>
</default-and-validation>

সারসংক্ষেপ:

Riot.js-এ Props এর জন্য ডিফল্ট মান এবং ভ্যালিডেশন একটি গুরুত্বপূর্ণ বৈশিষ্ট্য যা কম্পোনেন্টের নির্ভরযোগ্যতা এবং কোডের মান বজায় রাখতে সাহায্য করে। ডিফল্ট মান ব্যবহারের মাধ্যমে আপনি নিশ্চিত করতে পারেন যে কম্পোনেন্টটি যদি কোন প্রপার্টি না পায়, তাহলে সেটি একটি প্রাথমিক মান ব্যবহার করবে। অন্যদিকে, ভ্যালিডেশন আপনার Props এর ধরন এবং মান যাচাই করতে সাহায্য করে, যাতে ভুল ডেটা কম্পোনেন্টে প্রবাহিত না হয়।