PropTypes en componente apátrida funcional

103

Sin usar la clase, ¿cómo uso PropTypes en el componente funcional sin estado de react?

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

— Alan Jenshen
fuente

141

Los documentos oficiales muestran cómo hacer esto con las clases de componentes de ES6, pero lo mismo se aplica a los componentes funcionales sin estado.

En primer lugar, npm install/ yarn addel nuevo paquete prop-types si aún no lo ha hecho.

Luego, agregue sus propTypes (y defaultProps también si es necesario) después de que se haya definido el componente funcional sin estado, antes de exportarlo.

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;

— Miguel
fuente

¿Qué beneficio de hacer eso? También funcionaría sin propTypes definidos.

— Yarik

Gracias, pensé que era solo para componentes de clase.

— Doug

1

@Yarik Al usar propTypes, se realizan algunas comprobaciones automáticas. Recibirás una advertencia cada vez que tu código "rompa el contrato".

— Iulius Curt

26

No es diferente con el estado, puede agregarlo como:

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

Aquí hay un enlace a prop-types npm

— Yo putu yoga permana
fuente

2

Sin embargo, si está utilizando versiones más recientes de React, querrá importar PropTypespor sí solo, en cuyo caso querrá dejar Reacty solo tenertitle: PropTypes.string

— flyingace

1

De la misma manera que lo hace en componentes basados en clases:

   import PropTypes from 'prop-types';

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

Nota: Es posible que deba instalar a prop-typestravés de npm install prop-typeso yarn add prop-types, según la versión de React que esté utilizando.

— lokeshj
fuente

0

Se hace de la misma manera que lo hace con los componentes basados en clases.

import PropTypes from "prop-types";

    const = function_name => {}

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

Espero que esto ayude !

— Ashutosh Tiwari
fuente

0

Desde React 15 , use propTypespara validar accesorios y proporcionar documentación de esta manera:

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

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

Este código asumiendo el valor predeterminado props={}si no se proporcionan accesorios al componente.

— kirill .z
fuente