কার্যক্ষম স্টেটলেস উপাদানগুলিতে প্রোপটাইপস


107

ক্লাস ব্যবহার না করে, আমি কীভাবে প্রতিক্রিয়ার কার্যক্ষম স্টেটলেস উপাদানগুলিতে প্রোপটাইপগুলি ব্যবহার করব?

export const Header = (props) => (
   <div>hi</div>
)

উত্তর:


148

সরকারী দস্তাবেজ কিভাবে ES6 উপাদান শ্রেণীর সঙ্গে এই কাজ করতে দেন, কিন্তু একই আড়ম্বরহীন কার্মিক উপাদান জন্য প্রযোজ্য।

প্রথমত, npm install/ নতুন ঠেকনা-ধরনের প্যাকেজ যদি আপনি ইতিমধ্যে না।yarn add

তারপরে, স্টেটলেস ফাংশনাল উপাদান সংজ্ঞায়িত হওয়ার পরে, আপনার রফতানির আগে আপনার প্রোপটাইপগুলি (এবং প্রয়োজনে ডিফল্টপ্রপগুলিও যোগ করুন) add

import React from "react";
import PropTypes from "prop-types";

const Header = ({ name }) => <div>hi {name}</div>;

Header.propTypes = {
  name: PropTypes.string
};

// Same approach for defaultProps too
Header.defaultProps = {
  name: "Alan"
};

export default Header;

এটা করে কি লাভ? এটি পাশাপাশি সংজ্ঞায়িত প্রোপটাইপগুলি ছাড়াও কাজ করবে।
— ইয়ারিক

4
ধন্যবাদ, আমি ভেবেছিলাম এটি কেবল শ্রেণীর উপাদানগুলির জন্য।
— ডগ

4
@ ইয়ারিক প্রোপটাইপগুলি ব্যবহার করে আপনি কিছু স্বয়ংক্রিয় চেক আপনার জন্য পেয়ে যাবেন। আপনার কোড "চুক্তি ভঙ্গ করে" প্রতিবার আপনি একটি সতর্কতা পাবেন।
— Iulius কর্ট

27

স্টেটফুলের সাথে এটি আলাদা নয়, আপনি এটি যুক্ত করতে পারেন:

import PropTypes from 'prop-types';
Header.propTypes = {
  title: PropTypes.string
}

এখানে প্রম্প -প্রকারের এনপিএম -এর একটি লিঙ্ক


4
যদিও আপনি প্রতিক্রিয়াটির আরও সাম্প্রতিক সংস্করণগুলি ব্যবহার করছেন আপনি PropTypesনিজেরাই তা আমদানি করতে চান যে ক্ষেত্রে আপনি ছেড়ে যেতে চান Reactএবং ঠিক আছেtitle: PropTypes.string
— ফ্লায়েন্স

1

শ্রেণিভিত্তিক উপাদানগুলিতে আপনি একইভাবে:

   import PropTypes from 'prop-types';

   const funcName = (props) => {
       ...
   }
   funcName.propTypes = {
       propName: PropTypes.string.isRequired
   }

দ্রষ্টব্য: আপনি ব্যবহার করছেন প্রতিক্রিয়া সংস্করণ উপর নির্ভর করে আপনাকে বা এর prop-typesমাধ্যমে ইনস্টল করতে হতে পারে ।npm install prop-typesyarn add prop-types


1

এটি ক্লাস ভিত্তিক উপাদানগুলির সাথে আপনি যেমন করেন তেমনই সম্পন্ন হয়েছে

import PropTypes from "prop-types";

    const = function_name => {}

    function_name.propTypes = {
       prop_name : PropTypes.number
       . . . . . . . . . . . . . .
    }

আশাকরি এটা সাহায্য করবে !


-1

প্রতিক্রিয়া 15 , যেহেতু প্রপসpropTypes যাচাই করতে এবং ডকুমেন্টেশন এইভাবে সরবরাহ করতে ব্যবহার করুন:

import React from 'react';
import PropTypes from 'prop-types';

export const Header = (props={}) => (
   <div>{props}</div>
);
Header.propTypes = {
  props: PropTypes.object
};

ডিফল্ট মান অনুমানের উপর এই কোডটি props={}যদি উপাদানগুলিকে কোনও প্রপস সরবরাহ না করে।

আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.