PropTypes w funkcjonalnym składniku bezstanowym

Bez używania klasy, jak używać PropTypes w funkcjonalnym bezstanowym składniku reagowania?

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

W oficjalnych docs pokazać, jak to zrobić z klas składników ES6, ale to samo dotyczy obywatelstwa elementów funkcjonalnych.

Po pierwsze, npm install/ yarn addże nowe prop-ów pakiet , jeśli nie masz.

Następnie dodaj swoje propTypes (i defaultProps, jeśli jest to wymagane) po zdefiniowaniu bezstanowego składnika funkcjonalnego, przed jego wyeksportowaniem.

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;

Nie inaczej jest ze stanowym, możesz to dodać tak:

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

Oto link do prop-types npm

Tak samo jak w przypadku komponentów opartych na klasach:

   import PropTypes from 'prop-types';

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

Uwaga: Być może będziesz musiał zainstalować prop-typesprzez npm install prop-typeslub yarn add prop-types, w zależności od wersji Reacta, której używasz.

Robi się to tak samo, jak w przypadku komponentów opartych na klasach

import PropTypes from "prop-types";

    const = function_name => {}

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

Mam nadzieję że to pomoże !

Od React 15 użyj propTypesdo sprawdzania poprawności właściwości i dostarczania dokumentacji w ten sposób:

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

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

Ten kod przy założeniu wartości domyślnej, props={}jeśli żadne właściwości nie zostały dostarczone do komponentu.