PropTypes в функциональном компоненте без сохранения состояния

Без использования класса, как мне использовать PropTypes в функциональном компоненте реакции без сохранения состояния?

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

В официальных документы показывают , как сделать это с помощью классов ES6 компонентов, но то же самое относится и к лицам без функциональных компонентов.

Во - первых, npm install/ yarn addна новые типы проп-пакет , если вы еще не сделали.

Затем добавьте свои propTypes (и defaultProps, если требуется) после определения функционального компонента без сохранения состояния, прежде чем экспортировать его.

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;

Это не отличается от stateful, вы можете добавить его так:

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

Вот ссылка на проп-типы npm

Так же, как и в компонентах на основе классов:

   import PropTypes from 'prop-types';

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

Примечание. Возможно, вам придется установить prop-typesчерез npm install prop-typesили yarn add prop-types, в зависимости от версии React, которую вы используете.

Это делается так же, как и с компонентами на основе классов.

import PropTypes from "prop-types";

    const = function_name => {}

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

Надеюсь это поможет !

Начиная с React 15 , используйте propTypesдля проверки свойств и предоставления документации следующим образом:

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

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

Этот код принимает значение по умолчанию, props={}если компоненту не предоставлены реквизиты.