react-15(属性验证)

最新推荐文章于 2024-09-11 15:33:18 发布

ljl1255917058

最新推荐文章于 2024-09-11 15:33:18 发布

阅读量61

点赞数

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/ljl1255917058/article/details/131017372

版权

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