react笔记之属性(props)验证

责编:menVScode 2017-07-09 18:48 阅读(750)

        在组件中,父组件可以传递一些数据给子组件。如果父组件传入了一些错误数据的时候,可能会出现异常,这时候要让子组件在处理这些数据之前,做一些初步的验证。

        在react版本更新到15.5.0的时候,他把PropTypes方法给移除了,我们需要用npm安装一个prop-types的包。npm install prop-types --save

        PropTypes提供了非常全的数据验证

  optionalArray: PropTypes.array,
  optionalBool: PropTypes.bool,
  optionalFunc: PropTypes.func,
  optionalNumber: PropTypes.number,
  optionalObject: PropTypes.object,
  optionalString: PropTypes.string,
  optionalSymbol: PropTypes.symbol,

  // Anything that can be rendered: numbers, strings, elements or an array
  // (or fragment) containing these types.
  // node指的是任何可以被渲染的节点
  optionalNode: PropTypes.node,

  // A React element.
  //element指的是react.Element
  optionalElement: PropTypes.element,

        react官网可查看更详细:https://facebook.github.io/react/docs/typechecking-with-proptypes.html

例子

import React,{Component} from 'react';
import PropTypes from 'prop-types';

let propTypes = {
	imgSrc:PropTypes.string,
	name:PropTypes.string.isRequired,//isRequired代表一定要有值传进来
	meta:PropTypes.string,
	desc:PropTypes.string,
	joined:PropTypes.number,
	likeNum:PropTypes.number
}

export default class Card extends Component{
	render(){
		//console.log(this.props)
		let {imgSrc,name,meta,desc,joined,likeNum} = this.props;
		return(
			<div className='ui card'>
				<div className='image'>
					<img src={imgSrc} />
				</div>
				<div className='content'>
					<div className='header'>{name}</div>
					<div className='meta'>
						<a href=''>{meta}</a>
					</div>
					<div className='description'>{desc}</div>
				</div>
				<div className='extra content'>
					<span className='right floated'>Joined in {joined}</span>
					<span>
						<i className='empty heart icon'></i>{`${likeNum}  Like`}
					</span>
				</div>
			</div>
		)
	}
}
//挂载到组件上
Card.propTypes=propTypes;
标签: props react
前端交流群: MVC前端网(menvscode.com)-qq交流群:551903636

邮箱快速注册

忘记密码