PropTypes nel componente stateless funzionale

103

Senza usare class, come posso usare PropTypes nella componente stateless funzionale di React?

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

— Alan Jenshen
fonte

141

I documenti ufficiali mostrano come farlo con le classi di componenti ES6, ma lo stesso vale per i componenti funzionali senza stato.

In primo luogo, npm install/ yarn addil nuovo pacchetto prop-types se non lo hai già fatto.

Quindi, aggiungi i tuoi propTypes (e anche defaultProps se necessario) dopo che il componente funzionale stateless è stato definito, prima di esportarlo.

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
fonte

Qual è il vantaggio di farlo? Funzionerebbe anche senza propTypes definiti.

— Yarik

Grazie, pensavo fosse solo per i componenti di classe.

— Doug il

1

@Yarik Usando propTypes ottieni alcuni controlli automatici fatti per te. Riceverai un avviso ogni volta che il tuo codice "infrange il contratto".

— Iulius Curt

26

Non è diverso con lo stateful, puoi aggiungerlo come:

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

Ecco un collegamento a prop-types npm

— I Putu Yoga Permana
fonte

2

Tuttavia, se stai utilizzando versioni più recenti di React, ti consigliamo di importare PropTypesda solo, nel qual caso ti consigliamo di interrompere Reacte averetitle: PropTypes.string

— flyingace

1

Allo stesso modo dei componenti basati sulla classe:

   import PropTypes from 'prop-types';

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

Nota: potresti dover installare prop-typestramite npm install prop-typeso yarn add prop-types, a seconda della versione di React che stai utilizzando.

— lokeshj
fonte

0

È fatto allo stesso modo dei componenti basati su classi

import PropTypes from "prop-types";

    const = function_name => {}

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

Spero che questo ti aiuti !

— Ashutosh Tiwari
fonte

0

A partire da React 15 , utilizzare propTypesper convalidare gli oggetti di scena e fornire la documentazione in questo modo:

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

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

Questo codice presuppone un valore predefinito props={}se non vengono forniti oggetti di scena al componente.

— kirill .z
fonte