了解vue和小程序的同学应该知道,在vue和小程序中我们可以很方便的给属性做类型校验已经设定默认值,那么在react中可能相对麻烦一些,下面是教程:
- 如果使用了create-react-app搭建的项目会自带一个prop-types的包,我们需要在子组件中导入它,注意大小写哦。
import PropTypes from 'prop-types'
- 开始对子组件的属性做校验,再次注意大小写,声明时prop的p要小写,赋值时要大写:
当前class名.propTypes = { 父组件传递过来的属性1: PropTypes.number, 父组件传递过来的属性2: PropTypes.func, //类型为函数 父组件传递过来的属性3: PropTypes.oneOfType([ PropTypes.number, PropTypes.string ]), //类型既可以为数字,又可以为字符串 父组件传递过来的属性4: PropTypes.string.isRequired //必须传递一个字符串 } 当前class名.defaultProps = { 父组件传递过来的属性4: '我是默认值' //父组件就算不传值,且子组件又必须接收,就可以设默认值 }
更多用法可以去https://reactjs.org/docs/typechecking-with-proptypes.html查看哦!
网友评论