import React, { Component } from 'react';
import ReactDOM from 'react-dom/client';
import PropTypes from 'prop-types';
const root = ReactDOM.createRoot(document.getElementById('root'));
// 属性验证是为了让使用者更加安全的使用组件, 也是为了让组件的使用者更加清楚的知道组件的使用方式
// 验证方法, 需要在组件上添加一个静态属性propTypes, 这个属性的值是一个对象, 对象上的键值对就是对属性的验证
// 最重要的就是自定义验证器, 它是一个函数, 它可以做出任意的属性验证
// 类组件添加propTypes的方式可以简化为在类组件自身上添加一个静态propTypes
// static propTypes = {}
// const App = (props) => {
// const { count, money } = props
// return (
// <div>
// <p>count: { count }</p>
// <p>price: { money + 10 }</p>
// </div>
// )
// }
// App.propTypes = {
// count: PropTypes.number.isRequired,
// // money: PropTypes.number.isRequired,
// money: function name(props, propName, componentName) {
// const val = props[propName]
// if (typeof val !== 'number') {
// return new Error(`${componentName}中的${propName}属性验证失败了!, 要的是number, 传过来的是${typeof val}`)
// } else if (val < 0) {
// return new Error(`${componentName}中的${propName}属性验证失败了!, 要的是大于0的数, 传过来的是${val}`)
// }
// },
// }
class App extends Component {
static propTypes = {
count: PropTypes.number.isRequired,
// money: PropTypes.number.isRequired,
money: function name(props, propName, componentName) {
const val = props[propName]
if (val === undefined) {
return new Error(`${componentName}中的${propName}属性验证失败了! 这个属性是必传的`)
}
if (typeof val !== 'number') {
return new Error(`${componentName}中的${propName}属性验证失败了!, 要的是number, 传过来的是${typeof val}`)
}
if (val < 0) {
return new Error(`${componentName}中的${propName}属性验证失败了!, 要的是大于0的数, 传过来的是${val}`)
}
},
}
render () {
const { count, money } = this.props
return (
<div>
<p>count: { count }</p>
<p>price: { money + 10 }</p>
</div>
)
}
}
root.render(
<App count={1} money={-10} />
)
// vue属性验证
// {
// // props: ['a'],
// props: {
// a: Number,
// b: {
// type: Number,
// default: 1,
// required: true,
// }
// }
// }
// isTimeEnd
react-15(属性验证)
最新推荐文章于 2024-09-11 15:33:18 发布