# 随着你的应用程序不断增长,你可以通过类型检查捕获大量错误。对于某些应用程序来说,你可以使用 Flow 或 TypeScript 等 JavaScript 扩展来对整个应用程序做类型检查。但即使你不使用这些扩展,React 也内置了一些类型检查的功能。
导入PropTypes
参数校验
import PropTypes from 'prop-types';
开始校验
XiaojiejieItem.propTypes={
// 校验字符串
content:PropTypes.string,
//校验数字
index:PropTypes.number,
//校验方法
deleteItem:PropTypes.func
};
完整代码
import React, {Component} from 'react';
import PropTypes from 'prop-types';
class XiaojiejieItem extends Component {
constructor(props) {
super(props);
this.handleClick=this.handleClick.bind(this)
}
render() {
return (
<li onClick={this.handleClick}>{this.props.content}</li>
);
}
handleClick(){
this.props.deleteItem(this.props.index)
}
}
XiaojiejieItem.propTypes={
// 校验字符串
content:PropTypes.string,
//校验数字
index:PropTypes.number,
//校验方法
deleteItem:PropTypes.func
};
export default XiaojiejieItem;
# 给参数设置默认值
XiaojiejieItem.defaultProps={
cityName:'南宁'
};
完整代码
import React, {Component} from 'react';
import PropTypes from 'prop-types';
class XiaojiejieItem extends Component {
constructor(props) {
super(props);
this.handleClick=this.handleClick.bind(this)
}
render() {
return (
<li onClick={this.handleClick}>{this.props.cityName}+{this.props.content}</li>
);
}
handleClick(){
this.props.deleteItem(this.props.index)
}
}
XiaojiejieItem.propTypes={
// 校验字符串
content:PropTypes.string,
index:PropTypes.number,
deleteItem:PropTypes.func
};
XiaojiejieItem.defaultProps={
cityName:'南宁'
};
export default XiaojiejieItem;