Подтвердить что ты не робот

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

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

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

Ответ 1

В официальных документах показано, как это сделать с помощью классов компонентов 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;

Ответ 2

С сохранением состояния ничего не отличается. Вы можете добавить его следующим образом:

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

Вот ссылка на prop-types npm.