React Props 中级篇 —— 如何简化props的使用和如何在函数式组件中使用props

React Props 中级篇 —— 如何简化props的使用和如何在函数式组件中使用props

1. 简化props的使用：在Person本身添加 关键字 static

			class Person extends React.Component{
			
				static propTypes = {
					name:PropTypes.string.isRequired,
					age:PropTypes.number,
					sex:PropTypes.string,
				}
				
				static defaultProps = {
					age:1,
					sex:'没有性别'
				}
			
			} 

            ReactDOM.render(<Person name="小明" age={20}/>,document.getElementById("test"))

2. 函数中使用props

             function person(props){

                 console.log(props)  返回对象的类型
                 const {name,age,sex,speck} = props

                 return (
                     <ul>
                         <li>姓名：{name}</li>    
                         <li>年龄：{sex}</li>    
                         <li>性别：{age}</li>    
                     </ul>
                 )

             }

             **添加限制props的方法**
             
			// 限制类型
             Person.propTypes = {
                 name:PropTypes.string.isRequired,
                 age:PropTypes.number,
                 sex:PropTypes.string,
             }
			
			// 默认值
            Person.defaultProps = {
                age:18,
                sex:'没有性别'
            }

            ReactDOM.render(<Person name="小明" sex={} age={20}/>,document.getElementById("test"))