功能无状态组件中的PropType

Question

在不使用类的情况下，如何在react的功能性无状态组件中使用PropTypes？

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

Answer 1

与在基于类的组件中执行的操作相同：

   import PropTypes from 'prop-types';

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

注意：您可能必须通过npm安装道具类型或纱线添加道具类型来安装道具类型，具体取决于您使用的React版本。

Answer 2

它与stateful没有什么不同，您可以像这样添加它：

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

这里是一个链接到道具类型npm

Answer 3

官方文档展示了如何使用ES6组件类实现这一点，但无状态功能组件也是如此。

首先，npm安装/纱线添加道具类型包（如果尚未安装）。

然后，在定义无状态功能组件之后，在导出它之前，添加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;