组件的props是只读的，组件不能修改自己的props，在React中，组件可以接受任意的props，如函数，对象，基本类型以及react元素
一.props的使用
1.一些组件并不需要知道自己的children，尤其是像Sidebar和Dialog这通用'boxes'的组件。在这些组件中，我们推荐使用特别的children props直接将孩子元素传递到组件中。
function FancyBorder(props){return(<div>{props.children}</div>)
}
function WelcomeDialog(props){return <FancyBorder><h1>Welcome</h1><p>Thank you for visiting our spacecraft!</p></FancyBorder>
}
在<FancyBorder>中的任何tag都将作为children props传递到FancyBorder组件中
2.你除了可以通过children props直接向组件中传递子元素，你也可以按照你自己的习惯，而不是使用children
function FancyBorder(props){return <div>{props.top}{props.bottom}</div>
}
function WelcomeDialog(props){return <FancyBorder top={<Top/>} bottom={<Bottom/>} />
}
function Top(props){return <p> I am top</p>
}
function Bottom(props){return <p>I am bottom</p>
}
因为React元素(如：<Top>,<Bottom>)只是对象，所以可以将它们作为props传递到其他组件中
3.在某些情况下可能需要基于一个普通的组件创建出一个特别的组件。如通过Dialog组件创建出WelcomeDialog组件。在这里我们可以通过配置Dialog组件的props创建出特别的
WelcomeDialog组件。
function Dialog(props) {return (<FancyBorder color="blue"><h1 className="Dialog-title">{props.title}</h1><p className="Dialog-message">{props.message}</p></FancyBorder>);
}function WelcomeDialog() {return (<Dialogtitle="Welcome"message="Thank you for visiting our spacecraft!" />);
}
二.propTypes
从React15.5起，React.PropTypes被移入到单独的package中。react提供了一个package(prop-types)去检查props的类型。首先需要将prop-types引用到文件中。
import PropTypes from 'prop-types'
PropTypes暴露了一系列能够确定接受的props是否合法的验证器，出于性能的考虑，PropTypes在开发模式下才会起作用
import PropTypes from 'prop-types'class Greeting extends React.Component{render(){return <div>welcome,{this.props.name}</div>}}Greeting.propTypes = {name:PropTypes.string}
prop-types提供了大量的验证器，举例如下：
import PropTypes from 'prop-types'
myComponent.propTypes = {// 数组optionalArray: PropTypes.array,// 布尔值optionalBool: PropTypes.bool,// 函数optionalFunc: PropTypes.func,// 数值optionalNumber: PropTypes.number,// 对象optionalObject: PropTypes.object,// 字符串optionalString: PropTypes.string,// symboloptionalSymbol: PropTypes.symbol,// 能够被渲染的数值，字符串，元素或者包含这些类型的数组optionalNode: PropTypes.node,// React元素optionalElement: PropTypes.element,// optionalMessage是Message类的实例optionalMessage: PropTypes.instanceOf(Message),// optionalEnum为['News', 'Photos']中的其中一个optionalEnum: PropTypes.oneOf(['News', 'Photos']),//optionalUnion要么为字符串，要么为数值，要么为Message实例optionalUnion: PropTypes.oneOfType([PropTypes.string,PropTypes.number,PropTypes.instanceOf(Message)]),// optionalArrayOf是数值类型的数组optionalArrayOf: PropTypes.arrayOf(PropTypes.number),// optionalObjectOf的属性是数值optionalObjectOf: PropTypes.objectOf(PropTypes.number),// requiredFunc是函数，且必须提供。isRequired可以链接到任何值后面requiredFunc: PropTypes.func.isRequired,// requiredAny可以是任何类型，且必须提供requiredAny: PropTypes.any.isRequired,// 自定义验证器。customProp中必须包含matchmecustomProp: function(props, propName, componentName) {if (!/matchme/.test(props[propName])) {return new Error('Invalid prop `' + propName + '` supplied to' +' `' + componentName + '`. Validation failed.');}},// 自定义数组，对象类型的验证器// 验证器会调用数组或者对象中的每一个值// customArrayProp中的每一个值都要包含matchmecustomArrayProp: PropTypes.arrayOf(function(propValue, key, componentName, location, propFullName) {if (!/matchme/.test(propValue[key])) {return new Error('Invalid prop `' + propFullName + '` supplied to' +' `' + componentName + '`. Validation failed.');}})
}
给props指定默认值
通过组件的defaultProps属性可以给组件的props指定默认值
import PropTypes from 'prop-types'
class Greeting extends React.Component{render(){return <div>welcome,{this.props.name}</div>}
}
Greeting.defaultProps = {name:'lili'
}