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

8

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

export const Header = (props) => (
   <div>hi</div>
)
  • 1
    Высокий и сексуальный вопрос.
Теги:

2 ответа

15

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

Во-первых, npm install/yarn добавляет новый пакет prop-types, если вы еще этого не сделали.

Затем добавьте ваши 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
Поделиться
  • 0
    Какая польза от этого? Это будет работать без определенных propTypes также.
  • 0
    reactjs.org/docs/typechecking-with-proptypes.html
Показать ещё 2 комментария
4

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

Header.propTypes = {
  title: React.PropTypes.string
}
Поделиться
  • 2
    Хотя, если вы используете более поздние версии React, вы захотите импортировать PropTypes самостоятельно, и в этом случае вы захотите отключить React и просто иметь title: PropTypes.string

Ещё вопросы

Сообщество Overcoder
Наверх
Меню