# 随着你的应用程序不断增长,你可以通过类型检查捕获大量错误。对于某些应用程序来说,你可以使用 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;