函数式无状态组件中的 PropType

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

export const Header = (props) => (
<div>hi</div>
)
66643 次浏览
小开

它与有状态类没有什么不同，可以这样添加:

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

这里是到 道具型的 npm 的链接

小开

官方文件展示了如何使用 ES6组件类来实现这一点，但对于无状态的函数组件也是如此。

首先，npm install/yarn add的 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;
小开

与基于类的组件相同:

   import PropTypes from 'prop-types';


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

注意: 您可能必须通过 npm install prop-types或 yarn add prop-types安装 prop-types，这取决于您正在使用的 React 版本。

小开

它的工作方式与基于类的组件相同

import PropTypes from "prop-types";


const = function_name => {}


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

Hope This Helps !

小开

从 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={}的情况下没有向组件提供道具。


提交答案