117

在不使用类的情况下,如何在反应的功能性无状态组件中使用 PropTypes?

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

5 回答 5

171

官方文档展示了如何使用ES6 组件类来做到这一点,但同样适用于无状态功能组件。

首先,npm install/ prop-types包,如果你还没有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;
于 2017-06-16T07:11:17.440 回答
32

它与有状态没有什么不同,您可以像这样添加它:

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

这是prop-types npm的链接

于 2017-06-16T06:32:45.063 回答
1

它的完成方式与基于类的组件相同

import PropTypes from "prop-types";

    const = function_name => {}

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

希望这可以帮助 !

于 2020-05-29T08:34:48.577 回答
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 版本。

于 2020-02-18T05:38:56.613 回答
-1

React 15开始,使用propTypes这种方式验证 props 并提供文档:

import React from 'react';
import PropTypes from 'prop-types';

export const Header = (props={}) => (
   <div>{props}</div>
);
Header.propTypes = {
  props: PropTypes.object
};

props={}如果没有向组件提供任何道具,则此代码假定默认值。

于 2020-06-28T13:36:52.117 回答