PropTypes dans un composant sans état fonctionnel

103

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

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

— Alan Jenshen
source

142

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;

— Michael
source

Quel avantage de faire cela? Cela fonctionnerait également sans propTypes définis.

— Yarik

Merci, je pensais que c'était uniquement pour les composants de classe.

— Doug

1

@Yarik En utilisant propTypes, vous obtenez des vérifications automatiques effectuées pour vous. Vous recevrez un avertissement chaque fois que votre code "rompt le contrat".

— Iulius Curt le

26

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

— Je Putu Yoga Permana
source

2

Bien que si vous utilisez des versions plus récentes de React, vous voudrez importer PropTypesseul, auquel cas vous voudrez laisser Reacttitle: PropTypes.string

— tomber

1

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.

— Lokeshj
source

0

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 !

— Ashutosh Tiwari
source

-1

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.

— kirill .z
source