react中propTypes与defaultProps

引入prop-type

import PropTypes from 'prop-types';

可以检测的类型

optionalArray: PropTypes.array,
optionalBool: PropTypes.bool,
optionalFunc: PropTypes.func,
optionalNumber: PropTypes.number,
optionalObject: PropTypes.object,
optionalString: PropTypes.string,
optionalSymbol: PropTypes.symbol,

class定义中使用方法

import propsTypes from "prop-types";
class List extends Component {
 
  render() {
    return (
      
    );
  }
}
List.propTypes = {
  name: propsTypes.string.isRequired,
  list: propsTypes.array,
  deleteItme: propsTypes.func
};
List.defaultProps = {
  name: "张三"
};
export default List;

类名.propTypes={}设置传递的类型

类名.defaultProps={}设置默认值

ES7中使用方法示例

import PropsTypes from "prop-types";
class List extends Component {
  constructor(props) {
    super(props);
    this.state = {};
  }
  static propTypes = {
    name: PropsTypes.string.isRequired,
    list: PropsTypes.array,
    deleteItme: PropsTypes.func
  };
  static defaultProps = {
    name: "长萨"
  };
  
  render() {
    return (
     
    );
  }
}

export default List;

es7使用static关键字声明静态方法，propsType和defaultProps是关键字，不能改变