一、为什么使用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,

五、class定义中使用方法

class Greeting extends React.Component {

  render() {

    return (

      <h1>Hello, {this.props.name}</h1>

    );

  }

}

// Specifies the default values for props:

Greeting.defaultProps = {

  name: 'Stranger'

};

// Renders "Hello, Stranger":

ReactDOM.render(

  <Greeting />,

  document.getElementById('example')

);

六、ES7中使用方法示例

class Greeting extends React.Component {

  //如果没有传递该属性时的默认值

  static defaultProps = {

    name: 'stranger'

  }

  //如果传递该属性，该属性值必须为字符串

  static propTypes={

    name:PropTypes.string

  }

  render() {

    return (

      <div>Hello, {this.props.name}</div>

    )

  }

}

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

 static propTypes={

    name:PropTypes.string.isRequired

  }

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

  // An array of a certain type

  optionalArrayOf: PropTypes.arrayOf(PropTypes.number),

  // An object with property values of a certain type

  optionalObjectOf: PropTypes.objectOf(PropTypes.number),

  //示例

  static propTypes = {

        todoList:PropTypes.arrayOf(PropTypes.shape({

            id:PropTypes.string.isRequired,

            text:PropTypes.string

        }))

    }

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

  // An object taking on a particular shape

  optionalObjectWithShape: PropTypes.shape({

    optionalProperty: PropTypes.string,

    requiredProperty: PropTypes.number.isRequired

  }),

  //示例

  static propTypes = {

     object:PropTypes.shape({

         name:PropTypes.string,

         age:PropTypes.number

      })

 }

13人点赞

react

"小礼物走一走，来简书关注我"

作者：500薪水程序员
链接：https://www.jianshu.com/p/a73fb26c88b5
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

巴特西

react中使用prop-types检测props数据类型