在不使用类的情况下,如何在反应的功能性无状态组件中使用 PropTypes?
export const Header = (props) => (
<div>hi</div>
)
在不使用类的情况下,如何在反应的功能性无状态组件中使用 PropTypes?
export const Header = (props) => (
<div>hi</div>
)
官方文档展示了如何使用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;
它与有状态没有什么不同,您可以像这样添加它:
import PropTypes from 'prop-types';
Header.propTypes = {
title: PropTypes.string
}
这是prop-types npm的链接
它的完成方式与基于类的组件相同
import PropTypes from "prop-types";
const = function_name => {}
function_name.propTypes = {
prop_name : PropTypes.number
. . . . . . . . . . . . . .
}
希望这可以帮助 !
与基于类的组件相同的方式:
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 版本。
从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={}
如果没有向组件提供任何道具,则此代码假定默认值。