React学习1-6组件属性

import React,{Component} from 'react'
import ReactDOM,{render} from 'react-dom'
import PropTypes from 'prop-types'

class Person extends Component{
	//定义默认属性对象
	static defaultProps = {
		name:'未知'
	}
	//定义组件时希望传入组件的属性有类型和是否必填的限制
	static propTypes = {
		name:PropTypes.string,
		age:PropTypes.number.isRequired
	}

	constructor(){
		super();
		this.state = {happy:true}
	}
	
	handleClick = ()=>{
		this.setState({happy:!this.state.happy})
	}

	render(){
		let mood = this.state.happy?'开心':'难过'
		return (
			<div>
				<p>姓名：{this.props.name}</p>
				<p>年龄：{this.props.age}</p>
				<p>心情：{mood}</p>
				<button onClick={this.handleClick}>改变</button>
			</div>
		)
	}
}

render(<Person age={27}/>,document.querySelector('#root'))