1.PropTypes
类型检测
React
提供有一套类型检测的自己,通过React.PropTypes
来进行控制
class Greeting extends React.Component {
render() {
return (
<h1>Hello, {this.props.name}</h1>
);
}
}
Greeting.propTypes = {
name: React.PropTypes.string
};
React.PropTypes
提供了一系列的检验器用来确保你的数据的合法性,比如说样例中的React.PropTypes.string
,如果提供了不合法的数据,在javascript
的console
中会出现警告,由于性能原因,propTypes
的使用一般是在测试阶段,不用在用户发布阶段。
以下是React.PropTypes
的一些检验器的例子
MyComponent.propTypes = {
//这些检验器可以检验javascript的基本数据类型
optionalArray: React.PropTypes.array,
optionalBool: React.PropTypes.bool,
optionalFunc: React.PropTypes.func,
optionalNumber: React.PropTypes.number,
optionalObject: React.PropTypes.object,
optionalString: React.PropTypes.string,
optionalSymbol: React.PropTypes.symbol,
//任何可以被放在视图中的元素(true和DOM元素不允许)
optionalNode: React.PropTypes.node,
//为JSX对象
optionalElement: React.PropTypes.element,
// 用于限制只能输入特定的类的实例,这里就是只能是Message类的实例
optionalMessage: React.PropTypes.instanceOf(Message),
// 用于限定数据必须是枚举的数据中的一个
optionalEnum: React.PropTypes.oneOf(['News', 'Photos']),
// 用于限定数据必须是枚举的数据中的一个(对象)
optionalUnion: React.PropTypes.oneOfType([
React.PropTypes.string,
React.PropTypes.number,
React.PropTypes.instanceOf(Message)
]),
//用于限定该数组为某一种类型的数组
optionalArrayOf: React.PropTypes.arrayOf(React.PropTypes.number),
//用于限定该对象的属性必须为某一个种类型
optionalObjectOf: React.PropTypes.objectOf(React.PropTypes.number),
// 用于限定某一个对象某些属性应该为某些类型
optionalObjectWithShape: React.PropTypes.shape({
color: React.PropTypes.string,
fontSize: React.PropTypes.number
}),
// 用于限定这个属性必须存在,并且还必须是一个函数
requiredFunc: React.PropTypes.func.isRequired,
// 用于限定这个属性必须存在,可以为任何值
requiredAny: React.PropTypes.any.isRequired,
// 用于限定这个属性必须存在,可以为xxx值
requiredAny: React.PropTypes.xxx.isRequired,
//如果你想自定义检验器,如下(这是针对一个基本数据类型的属性的)
//propName是属性的名字,componentName是组件名,这个东西React会自动处理传入
customProp: function(props, propName, componentName) {
if (!/matchme/.test(props[propName])) {
return new Error(
'Invalid prop `' + propName + '` supplied to' +
' `' + componentName + '`. Validation failed.'
);
}
},
// 如果你想自定义检验器,如下(这是针对一个数组和对象)
//propValue是props.name的值
//key是数组的索引
//componentName是组件名称
//location是本地的props对象
//propFullName是属性的全称比如name[key].
customArrayProp: React.PropTypes.arrayOf(function(propValue, key, componentName, location, propFullName) {
if (!/matchme/.test(propValue[key])) {
return new Error(
'Invalid prop `' + propFullName + '` supplied to' +
' `' + componentName + '`. Validation failed.'
);
}
})
};
2.defaultProps
默认属性值设置
class Greeting extends React.Component {
render() {
return (
<h1>Hello, {this.props.name}</h1>
);
}
}
//默认属性值设置
Greeting.defaultProps = {
name: 'Stranger'
};
//没有进行name设置,会自动进行默认属性设置
ReactDOM.render(
<Greeting />,
document.getElementById('example')
);
这个默认属性的设置非常有意思,可以一定程度上减少代码复杂度
下一篇将讲
React
中ref
属性的必要性