码迷,mamicode.com
首页 > 其他好文 > 详细

react prop-types

时间:2020-05-01 14:46:41      阅读:54      评论:0      收藏:0      [点我收藏+]

标签:LTP   exp   设置   ring   dem   his   stat   不同   asc   

一、为什么使用prop-types

在多人开发时,当被人使用自己定义的组件时,有可能出现类型传错的情况,而在自己的组件上加上prop-types,他可以对父组件传来的props进行检查,加入父组件中想传递的是字符串类型‘3’,而传递了一个数字类型3,如果没有类型检查系统不会给与提示,但是有了类型检查以后,再控制台会给你一个类型传递错误的提示。这样在工作中可以快速找到错误。

二、学习文档

https://www.npmjs.com/package/prop-types npm官网
https://reactjs.org/docs/typechecking-with-proptypes.html react官方

  

三、安装与引入

//安装
npm install prop-types --save
//引入
import PropTypes from ‘prop-types‘;

  

四、它可以检测的类型

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

  

五、demo

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

//子组件
class Children extends Component {    
  //如果没有传递该属性时的默认值
  static defaultProps = {        //写class里面就用static 如果是外面就是下面的写法
    name: ‘default‘
  }

  static propTypes = {
    //如果传递该属性,该属性值必须为字符串
    name: PropTypes.string
  }

  render() {
    return (
      <div>
        {this.props.name}
      </div>
    )
  }
}
//如果没有传递该属性时的默认值
// Children.defaultProps = {
//   name: ‘default‘
// }

// Children.propTypes = {
//   //如果传递该属性,该属性值必须为字符串
//   name: PropTypes.string.isRequired
// }
//父组件
export default class Home extends Component {
  render() {
    return (
      <div>
        <Children/>
        Home
      </div>
    )
  }
}
        

  

七、使用isRequired设置属性为必须传递的值

static propTypes={
    name:PropTypes.string.isRequired
  }

  

八、arrOf和objectOf多重嵌套类型检测

  optionalArrayOf: PropTypes.arrayOf(PropTypes.number),
 
  optionalObjectOf: PropTypes.objectOf(PropTypes.number),
  //示例
  static propTypes = {
        todoList:PropTypes.arrayOf(PropTypes.shape({
            id:PropTypes.string.isRequired,
            text:PropTypes.string
        }))
    }

  

九、shape检测不同对象的不同属性的不同数据类型

  optionalObjectWithShape: PropTypes.shape({
    optionalProperty: PropTypes.string,
    requiredProperty: PropTypes.number.isRequired
  }),
  //示例
  static propTypes = {
     object:PropTypes.shape({
         name:PropTypes.string,
         age:PropTypes.number
      })
 }

  

react prop-types

标签:LTP   exp   设置   ring   dem   his   stat   不同   asc   

原文地址:https://www.cnblogs.com/yetiezhu/p/12813271.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!