React.PropTypes.xxx控制台报错说xxx是undefined

组件里

BodyIndex.propTypes = {

usernum: React.PropTypes.number

};

控制台报错显示的是:Cannot read property ‘number’ of undefined

在之前的版本之中,我们可以通过React.PropTypes这个API访问React内置的一些类型来检查props,在15.5.0版本中,这一API被独立成了一个新的包 prop-types

1.5之前

import React from 'react';
import BodyChild from './bodychild';

const defaultProps = {
    username: '这是一个默认的用户名'
};

export default class BodyIndex extends React.Component {
    constructor() {
        super(); //调用基类的所有的初始化方法
        this.state = {
            username: "Parry",
            age: 20
        }; //初始化赋值
    };
    changeUserInfo(age) {
        this.setState({age: age});
    };
    handleChildValueChange(event) {
        this.setState({age: event.target.value});
    };
    render() {
        // setTimeout(()=>{
        //   //更改 state 的时候
        //   this.setState({username: "IMOOC",age : 30});
        // },4000);
        return (
            <div>
                <h2>页面的主体内容</h2>
                <p>接收到的父页面的属性:userid: {this.props.userid} username: {this.props.username}</p>
                <p>age: {this.state.age}</p>
                <input type="button" value="提交" onClick={this.changeUserInfo.bind(this,99)}/>
                <BodyChild {...this.props} id={4} handleChildValueChange={this.handleChildValueChange.bind(this)}/>
            </div>
        )
    }
}

BodyIndex.propTypes = {
    userid: React.PropTypes.number.isRequired
};

BodyIndex.defaultProps = defaultProps;

1.5之后

import React, { Component } from 'react';
import BodyChild from '../components/bodychild.js'
import PropTypes from 'prop-types'; 

export default class Input extends Component {
    constructor() {
        super();
        this.state={
            username:"parry",
            age:'23'
        }
    }
    changeUserInfo(){
        this.setState({age:30})
    }
    handleChildValueChange(event){
        this.setState({age:event.target.value})
    }
    render() {
        // setTimeout(()=>{
        //     this.setState({
        //         username:'gaozheng'
        //     })
        // },4000)
        return (
            <div>
                <h2>{this.state.username}</h2>
                <h3>{this.state.age}</h3>
                <p>接收到的父页面的属性{this.props.username}{this.props.userid}</p>
                <input type="button" value="提交" onClick={this.changeUserInfo.bind(this)} />
                <BodyChild handleChildValueChange={this.handleChildValueChange.bind(this)} />
            </div>
        )
    }
}
Input.propTypes= {
    userid: PropTypes.number.isRequired
}

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值