验证外部属性:
1、需要安装
cnpm install prop-types --save-dev
2、过程
1)装插件
cnpm install prop-types --save-dev
2)引入
import PropTypes from "prop-types";
3)验证
组件名称.propTypes = {
key:PropTypes.类型
}
注释:key:需要验证的属性
PropTypes.类型
4)解释:
Protype 大写 第三方的一个包;
protype: 属性 每一个组件都会有这个属性
3、文档
先引入:
import PropTypes from "prop-types";
因为val是string类型,所以会报错:
4、常用检测类型:加粗为常用
optionalArray: PropTypes.array,
optionalBool: PropTypes.bool,
optionalFunc: PropTypes.func,
optionalNumber: PropTypes.number,
optionalObject: PropTypes.object,
optionalString: PropTypes.string,
optionalSymbol: PropTypes.symbol,
1)任何可被渲染的元素(包括数字、字符串、子元素或数组)。
optionalNode: PropTypes.node,
2) 一个 React 元素
optionalElement: PropTypes.element,
3) 你也可以声明属性为某个类的实例,这里使用 JS 的
instanceof 操作符实现。
optionalMessage: PropTypes.instanceOf(Message),
4)你也可以限制你的属性值是某个特定值之一
optionalEnum: PropTypes.oneOf(['News', 'Photos']),
5) 限制它为列举类型之一的对象
optionalUnion: PropTypes.oneOfType([
PropTypes.string,
PropTypes.number,
PropTypes.instanceOf(Message)
]),
6)一个指定元素类型的数组
optionalArrayOf: PropTypes.arrayOf(PropTypes.number),
7) 一个指定类型的对象
optionalObjectOf: PropTypes.objectOf(PropTypes.number),
8) 一个指定属性及其类型的对象
optionalObjectWithShape: PropTypes.shape({
color: PropTypes.string,
fontSize: PropTypes.number
}),
默认外部属性:
1、defaultProps 语法:
组件名称.defaultProps = {
key:val
}
eg:
One.defaultProps = {
val:"123"
}
2、说明:
当外部组件没有传递该值的时候 使用默认的值 如果外部组件传递了该值,那么就用外部组件的值