PropTypes进行类型检查

注意: React.PropTypes 已经废弃, 请使用 prop-types 库来代替.

随着应用日渐庞大,我们可以通过类型检查捕获大量错误. 对于某些应用来说,你还可以使用 Flow 或 TypeScript 这样的 JS 扩展来对整个应用程序进行类型检查. 然而即使不用他们, React 也有一些内置的类型检查功能. 要检查组件的属性,需要配置特殊的 propTypes 属性:

import PropTypes from 'prop-types';
class Greeting extends React.Component {
	render () {
		return (
			<h1> Hello , { this.props.name } </h1>
		)
	}
 }
 Greeting.propTypes = {
	name: PropTypes.string
}

PropTypes 包含一整套验证器,可用于确保你接收的数据是有有效的. 在上面实例中, 我们使用了 PropTypes.string. 当你给属性传递无效值时, JS 控制台将会打印警告, 处于性能原因, propTypes 只在开发模式下进行检查.

可以将属性声明为JS原生类型 (array, bool, func, number,object, string, symbol )
任何可被渲染的元素 (包括shu子,字符串, 子元素或数组
一个 React 元素
也可以声明属性为某个类的实例, 这里使用 JS 的 instanceof 操作符实现.
也可以限制属性值是某个特定值之一.
限制他为列举类型之一的对象
一个指定元素类型的数组. PropTypes.arrayOf(PropTypes.number)
一个指定类型的对象
一个指定属性及其类型的对象
也可以在任何 PropTypes 属性后面加上 ‘isRequired’ 后缀,这样如果这个属性父组件没有提供,会打印警告信息.
任何类型的数据
也可以指定一个自定义验证器. 他应该在验证失败时返回一个 Error 对象而不是 console.warn 或抛出异常. 不过在 oneOfTyep 中他不起作用
不过你可以提供一个自定义的 arrayOf 或 objectOf 验证器, 他应该在验证失败时返回一个 Error对象. 他被用于验证数组或对象的每个值. 验证器前两个参数的第一个是数组或对象背身,第二个是他们对应的键

限制单个子代:
使用 PropTypes.element 可以指定只传递一个子代.
属性默认值:
可以通过配置 defaultProps 为 props 定义默认值.

class Greeting extends React.Component {
	render () {
		return ( 
   				<h1> hello {this.props.name} </h1>
       )
	}
}
//为属性指定默认值
Greeting.defaultProps = {
	name: 'Stranger'
}

PropTypes进行类型检查

猜你喜欢