类型检查
- 对props里面的属性进行类型判断，可以使用propTypes来做到，同样需要使用 static关键字来修饰。
- isRequired 可以指定必填项
- propTypes属性 在 react 包中，需要先导入才能使用。
import PropTypes from 'prop-types'
static propTypes={
name: PropTypes.string.isRequired,
age: PropTypes.number,
//要求属性取值为特定的几个值
sex: PropTypes.oneOf(['man', 'woman']),
//要求属性可以为指定类型中的任意一个
tel: PropTypes.oneOfType([
PropTypes.string,
PropTypes.number,
]),
}
全部类型检查说明：
//JS 基本数据类型
export const any: Requireable<any>;
export const array: Requireable<any[]>;
export const bool: Requireable<boolean>;
export const func: Requireable<(...args: any[]) => any>;
export const number: Requireable<number>;
export const object: Requireable<object>;
export const string: Requireable<string>;
//可以被渲染的对象 numbers, strings, elements 或 array
export const node: Requireable<ReactNodeLike>;
//// React 元素
export const element: Requireable<ReactElementLike>;
export const symbol: Requireable<symbol>;
// 用 JS 的 instanceof 操作符声明 prop 为类的实例。
export function instanceOf<T>(expectedClass: new (...args: any[]) => T): Requireable<T>;
// 用 enum 来限制 prop 只接受指定的值。
export function oneOf<T>(types: T[]): Requireable<T>;
// 可以是多个对象类型中的一个
export function oneOfType<T extends Validator<any>>(types: T[]): Requireable<NonNullable<InferType<T>>>;
// 指定类型组成的数组
export function arrayOf<T>(type: Validator<T>): Requireable<T[]>;
// 指定类型的属性构成的对象
export function objectOf<T>(type: Validator<T>): Requireable<{ [K in keyof any]: T; }>;
//指定属性及其类型的对象
export function shape<P extends ValidationMap<any>>(type: P): Requireable<InferProps<P>>;
export function exact<P extends ValidationMap<any>>(type: P): Requireable<Required<InferProps<P>>>;
任意类型加上 isRequired 来使 prop 不可空，比如name不能为空：
static propTypes={
name: PropTypes.string.isRequired,
age: PropTypes.number,
}
部分类型举例：
1.PropTypes.shape
//子组件CheckObjectComponent 中类型约束：
static propTypes={
//指定属性及其类型的对象，
position: PropTypes.shape({
num: PropTypes.number.isRequired,
job:PropTypes.string,
}),
}
//父组件调用：
var shapeParams = {name: '王五', age: 23, sex: 'man',position:{num:'1010001',job:"iOS开发"}};
...
<CheckObjectComponent position = {shapeParams. position} />
//或延展写法：
<CheckObjectComponent {...shapeParams}/>
PropTypes.element
约束属性是React元素，实例：
//子组件CheckElementComponent中：
export class CheckElementComponent extends Component {
static propTypes={
//元素
addressElement:PropTypes.element,
}
constructor(props) {
super(props);
};
render(){
return (
<View style={styles.container}>
<View><Text>地址:</Text>{this.props.addressElement}</View>
</View>
);
}
}
//父组件调用：
var elementParams = {addressElement:<View><Image source={require('../../images/tabBar/me_normal.png')}></Image><Text style={[{color:'blue'}]}>我在北京....</Text></View>};
...
<CheckElementComponent {...elementParams}/>
PropTypes.instanceOf
//子组件CheckInstanceOfComponent：
export class CheckInstanceOfComponent extends Component {
static propTypes={
//声明属性为某个类的实例
addressElement:PropTypes.instanceOf(CheckElementComponent),
}
constructor(props) {
super(props);
};
render(){
return (
<View style={styles.container}>
{this.props.addressElement}
</View>
);
}
}
//父组件调用：
var temElement = {addressElement:<Text style={[{color:'blue'}]}>我是instanceOf（CheckElementComponent）实例！</Text>};
var testInstance = <CheckElementComponent {...temElement}></CheckElementComponent>
...
<CheckInstanceOfComponent {...instanceOfParams}/>
...
