组件的props是只读的,组件不能修改自己的props,在React中,组件可以接受任意的props,如函数,对象,基本类型以及react元素
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 >
- }
在
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元素(如:
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 (
- <Dialog
- title="Welcome"
- message="Thank you for visiting our spacecraft!" />
- );
- }
从React15.5起,R
- eact.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,
- // symbol
- optionalSymbol: 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中必须包含matchme
- customProp: function(props, propName, componentName) {
- if (!/matchme/.test(props[propName])) {
- return new Error(
- 'Invalid prop `' + propName + '` supplied to' +
- ' `' + componentName + '`. Validation failed.'
- );
- }
- },
- // 自定义数组,对象类型的验证器
- // 验证器会调用数组或者对象中的每一个值
- // customArrayProp中的每一个值都要包含matchme
- customArrayProp: 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'
- }
来源: http://www.cnblogs.com/QxQstar/p/7581986.html