标签：LTP exp 设置 ring dem his stat 不同 asc
在多人开发时，当被人使用自己定义的组件时，有可能出现类型传错的情况，而在自己的组件上加上prop-types，他可以对父组件传来的props进行检查，加入父组件中想传递的是字符串类型‘3’，而传递了一个数字类型3，如果没有类型检查系统不会给与提示，但是有了类型检查以后，再控制台会给你一个类型传递错误的提示。这样在工作中可以快速找到错误。
https://www.npmjs.com/package/prop-types npm官网 https://reactjs.org/docs/typechecking-with-proptypes.html react官方
//安装 npm install prop-types --save //引入 import PropTypes from ‘prop-types‘;
optionalArray: PropTypes.array, optionalBool: PropTypes.bool, optionalFunc: PropTypes.func, optionalNumber: PropTypes.number, optionalObject: PropTypes.object, optionalString: PropTypes.string, optionalSymbol: PropTypes.symbol,
import React, { Component } from ‘react‘
import PropTypes from ‘prop-types‘;
//子组件
class Children extends Component {
//如果没有传递该属性时的默认值
static defaultProps = { //写class里面就用static 如果是外面就是下面的写法
name: ‘default‘
}
static propTypes = {
//如果传递该属性，该属性值必须为字符串
name: PropTypes.string
}
render() {
return (
<div>
{this.props.name}
</div>
)
}
}
//如果没有传递该属性时的默认值
// Children.defaultProps = {
// name: ‘default‘
// }
// Children.propTypes = {
// //如果传递该属性，该属性值必须为字符串
// name: PropTypes.string.isRequired
// }
//父组件
export default class Home extends Component {
render() {
return (
<div>
<Children/>
Home
</div>
)
}
}
static propTypes={
name:PropTypes.string.isRequired
}
optionalArrayOf: PropTypes.arrayOf(PropTypes.number),
optionalObjectOf: PropTypes.objectOf(PropTypes.number),
//示例
static propTypes = {
todoList:PropTypes.arrayOf(PropTypes.shape({
id:PropTypes.string.isRequired,
text:PropTypes.string
}))
}
optionalObjectWithShape: PropTypes.shape({
optionalProperty: PropTypes.string,
requiredProperty: PropTypes.number.isRequired
}),
//示例
static propTypes = {
object:PropTypes.shape({
name:PropTypes.string,
age:PropTypes.number
})
}
标签：LTP exp 设置 ring dem his stat 不同 asc
原文地址：https://www.cnblogs.com/yetiezhu/p/12813271.html
