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

103

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

export const Header = (props) => (
   <div>hi</div>
)
Алан Дженшен
источник

Ответы:

142

В официальных документы показывают , как сделать это с помощью классов 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;
Майкл
источник
Какая польза от этого? Он также будет работать без определенных propTypes.
Ярик
Спасибо, я думал, это только для компонентов класса.
Дуг
1
@Yarik Используя propTypes, вы автоматически выполняете некоторые проверки. Вы будете получать предупреждение каждый раз, когда ваш код «разрывает контракт».
Юлиус Курт,
26

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

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

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

Я Путу Йога Пермана
источник
2
Хотя, если вы используете более свежие версии React, вы захотите импортировать PropTypesсамостоятельно, и в этом случае вы захотите прекратить Reactи простоtitle: PropTypes.string
flyace
1

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

   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, которую вы используете.

Локеш
источник
0

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

import PropTypes from "prop-types";

    const = function_name => {}

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

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

Ашутош Тивари
источник
-1

Начиная с 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={}если компоненту не предоставлены реквизиты.

kirill .z
источник