PropTypes em componente funcional sem estado

103

Sem usar a classe, como faço para usar PropTypes no componente sem estado funcional do react?

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

— Alan Jenshen
fonte

141

Os documentos oficiais mostram como fazer isso com classes de componentes ES6, mas o mesmo se aplica a componentes funcionais sem estado.

Em primeiro lugar, npm install/ yarn addo novo pacote prop-types se você ainda não o fez.

Em seguida, adicione seus propTypes (e defaultProps também, se necessário) após o componente funcional sem estado ter sido definido, antes de exportá-lo.

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 é a vantagem de fazer isso? Funcionaria sem propTypes definidos também.

— Yarik

Obrigado, pensei que fosse apenas para componentes de classe.

— Doug

1

@Yarik Ao usar propTypes, você faz algumas verificações automáticas para você. Você receberá um aviso toda vez que seu código "quebrar o contrato".

— Iulius Curt

26

Não é diferente com o stateful, você pode adicioná-lo como:

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

Aqui está um link para os prop-types npm

— I Putu Yoga Permana
fonte

2

Porém, se você estiver usando versões mais recentes do React, você desejará importar PropTypespor conta própria, caso em que deseja parar Reacte apenas tertitle: PropTypes.string

— flyingace

1

Da mesma forma que você faz em componentes baseados em classe:

   import PropTypes from 'prop-types';

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

Observação: pode ser necessário instalar prop-typesvia npm install prop-typesou yarn add prop-types, dependendo da versão do React que você está usando.

— Lokeshj
fonte

0

É feito da mesma maneira que você faz com componentes baseados em classe

import PropTypes from "prop-types";

    const = function_name => {}

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

Espero que isto ajude !

— Ashutosh Tiwari
fonte

0

Desde React 15 , use propTypespara validar adereços e fornecer documentação desta forma:

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

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

Este código pressupõe o valor padrão props={}se nenhum suporte for fornecido ao componente.

— kirill .z
fonte