PropTypes dans un composant sans état fonctionnel

Sans utiliser de classe, comment utiliser PropTypes dans le composant fonctionnel sans état de react?

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

La documentation officielle montre comment procéder avec les classes de composants ES6, mais il en va de même pour les composants fonctionnels sans état.

Premièrement, npm install/ yarn addle nouveau package prop-types si vous ne l'avez pas déjà fait.

Ensuite, ajoutez vos propTypes (et defaultProps aussi si nécessaire) une fois le composant fonctionnel sans état défini, avant de l'exporter.

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;

Ce n'est pas différent avec l'état, vous pouvez l'ajouter comme:

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

Voici un lien vers les types d' accessoires npm

De la même manière que vous faites dans les composants basés sur les classes:

   import PropTypes from 'prop-types';

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

Remarque: vous devrez peut-être installer prop-typesvia npm install prop-typesou yarn add prop-types, selon la version React que vous utilisez.

C'est fait de la même manière que vous le faites avec les composants basés sur les classes

import PropTypes from "prop-types";

    const = function_name => {}

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

J'espère que cela t'aides !

Depuis React 15 , utilisez propTypespour valider les accessoires et fournir la documentation de cette façon:

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

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

Ce code sur l'hypothèse de la valeur par défaut props={}si aucun accessoire n'est fourni au composant.