कार्यात्मक स्टेटलेस घटक में PropTypes

Question 1

वर्ग का उपयोग किए बिना, मैं प्रतिक्रिया के कार्यात्मक स्टेटलेस घटक में PropTypes का उपयोग कैसे करूं?

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

Question 2

आधिकारिक डॉक्स कैसे ES6 घटक वर्गों के साथ यह करने के लिए दिखाने के लिए, लेकिन एक ही राज्यविहीन कार्यात्मक घटकों के लिए लागू होता है।

सबसे पहले, npm install/ नई प्रोप-प्रकार के पैकेज यदि आपने ऐसा नहीं किया है।yarn 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;

Question 3

यह स्टेटफुल के साथ अलग नहीं है, आप इसे इस तरह से जोड़ सकते हैं:

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

यहाँ प्रोप-प्रकार npm का लिंक दिया गया है

Question 4

उसी तरह से जो आप क्लास आधारित घटकों में करते हैं:

   import PropTypes from 'prop-types';

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

नोट: आपके prop-typesद्वारा उपयोग किए जा रहे रिएक्ट संस्करण के आधार पर आपको इसके माध्यम से npm install prop-typesया स्थापित करना पड़ सकता है yarn add prop-types।

Question 5

यह उसी तरह से किया जाता है जैसा आप क्लास बेस्ड कम्पोनेंट्स के साथ करते हैं

import PropTypes from "prop-types";

    const = function_name => {}

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

उम्मीद है की यह मदद करेगा !

Question 6

प्रतिक्रिया 15 के बाद से, प्रॉपरpropTypes को मान्य करने और इस तरह से प्रलेखन प्रदान करने के लिए उपयोग करें:

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

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

props={}यदि घटक को कोई प्रॉप प्रदान नहीं किया गया है, तो डिफ़ॉल्ट मान के अनुमान पर यह कोड ।