PropTypes在功能无状态组件中

Question

在不使用类的情况下,如何在函数无状态组件中使用PropTypes？

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

Answer 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;

Answer 2

它与有状态没有什么不同,你可以添加它:

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

这是prop-types npm 的链接