Question

不使用类，如何在函数无状态组件中使用PropTypes？

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

Answer 1

official docs显示了如何使用ES6组件类执行此操作，但同样适用于无状态功能组件。

首先，npm install / yarn add new prop-types package如果您还没有。{/ p>

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

的链接

Answer 3

使用基于类的组件的相同方法：

   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版本。

Answer 4

与基于类的组件相同，

import PropTypes from "prop-types";

    const = function_name => {}

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

希望这会有所帮助！

Answer 5

自React 15起，使用propTypes来验证道具并通过以下方式提供文档：

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

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

如果未向组件提供道具，则此代码假定默认值为props={}。

PropTypes在功能无状态组件中

5 个答案: