中props使用this报错_关于新版 React 的 props 类型限制使用说明

一、前言

最近使用了 React 的类型限制，发现报错了

import React, { Component, PropTypes } from 'react';

查看一下相关文档，原来这一用法，已经过时了

https://reactjs.org/blog/2017/04/07/react-v15.5.0.html#migrating-from-react.proptypes

二、解决方案

我们可以通过 prop-types，来继续对数据类型做限制。

1.引入

npm install  install prop-types

import PropTypes from 'prop-types';

2.在自定义组件中使用

import React, {Component} from "react";import PropTypes from 'prop-types';class ClickTest extends Component {    constructor(props) {        super(props);        // 声明变量        this.state = {            // 从props获取构造函数默认值            count: props.initValue || 5        };        // 声明方法        this.addCount = this.addCount.bind(this);    }    addCount() {        this.setState({            count: this.state.count + 1        })    }    render() {        return (            

{this.state.count}

+1 ) }}// props初始值ClickTest.defaultProps = { initValue: 520};// props类型ClickTest.propTypes = { initValue: PropTypes.number.isRequired};export default ClickTest;