组件里
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
}