可复用组件

可复用组件

类定义完后，追加属性propTypes传入参数userid:React.PropTypes.number，规定userid是一个数字型，如果传入字符型和其他的非数字型，都会报错。
给页面传入默认值 const defaultProps ={username:'这是一个默认的用户名'//默认属性设置};，把定义的prop传入 BodyIndex.defaultProps = defaultProps;。
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
};//初始化赋值
}

handleChildValueChange(event){
this.setState({age:event.target.value})
}

changeUserInfo(){
this.setState({age:50});
};

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
};

BodyIndex.defaultProps = defaultProps;