>React属性验证器 这个与react的版本有关系 类型 | 验证器 ---|:-- 数组 | React.PropTypes.array 布尔值 | React.PropTypes.bool 函数 | React.PropTypes.func 数字 | React.PropTypes.number 对象 | React.PropTypes.object 字符串 | React.PropTypes.string ## 函数定义/类定义组件 ### 1.无状态函数式组件 定义一个组件最简单的方式是使用JavaScript函数： 官方例子： ~~~javascript function Welcome(props) { return <h1>Hello, {props.name}</h1>; } ~~~ 非官方例子 ~~~JavaScript const Summary = ({ ingredients, steps, title })=>{ return <div> <h1>{ title }</h1> <p>{ ingredients } Ingredients | { steps } Steps</p> </div> } Summary.propTypes = { ingredients: React.Proptypes.number.isrequired, steps: React.Proptypes.number.inRequired } Summary.defaultProps = { ingredients: 1, steps: 1 } ~~~ 或者直接在参数中直接设置默认属性和值 ~~~javascript const Summary = ({ ingredients = 0, steps = 0,title = '[recipe]' }) => { return <div> <h1>{ title }</h1> <p>{ ingredients } Ingredients | { steps } Steps</p> </div> } ~~~ 该函数是一个有效的React组件，它接收一个单一的“props”对象并返回了一个React元素。我们之所以称这种类型的组件为函数定义组件，是因为从字面上来看，它就是一个JavaScript函数。 ### 2.ES5/ES6类 我们先看看ES5的写法： ES5写法如下： ~~~javascript const Summary = createClass({ propTypes = { ingredients: PropTypes.number, steps: PropTypes.number, title: PropTypes.string } getDefaultProps() { return { ingredient: 0, steps: 0, title: "[recipe]" } } render() { const { ingredients, steps, title } = this.props return ( <div> <h1>{ title }</h1> <p>{ ingredients } Ingredients | { steps } Steps</p> </div> ) } }) ~~~ 你也可以使用 [ES6 class](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Classes) 来定义一个组件: 官方例子 ~~~javascript class Welcome extends React.Component { render() { return <h1>Hello, {this.props.name}</h1>; } } ~~~ 非官方例子 ~~~javascript class Summary extends React.Component { render () { const { ingredients, steps, title } = this.props return ( <div> <h1>{ title }</h1> <p>{ ingredients } Ingredients | { steps } Steps</p> </div> ) } } Summary.propTypes = { ingredients: Proptypes.number, steps: Proptypes.number, // 自定义属性 title title: (props, propName) => { (typeof props[propName] !== 'string') ? new Error("A title must be a string") : (props[propName].length > 20) ? new Error(`title is over 20 characters`) : null } } Summary.defaultProps = { ingredients: 0, steps: 0, title: "[recipe]" } ~~~ 上面两个组件在React中是相同的。 >类的静态属性 >>类的静态属性允许用户在类的内部声明中封装propTypes和defaultProps属性。属性构造器也提供了封装功能和更简洁的语法： 在类的外部定义属性 defaultProps和propTypes 最新的ECMAScript 规范提案中提供了一种替代性的解决方案：Class Field & Static Properties