模块开发之React使用第三方库PropTypes属性限制(十二)

ゝ一世哀愁。 2022-05-21 08:18 243阅读 0赞

## 模块开发之React使用第三方库PropTypes属性限制(十二) ##

# 前言 #

这是一个纯配置的第三方库模块，所以我们需要掌握知识不需要太详细。能知道并拿来即用即可。  
下面以使用该模块的背景展开，然后介绍使用方法，包括全部能使用的属性。掌握这几点就OK。

# 为什么使用PropTypes #

[React v15.5.0官方介绍][React v15.5.0]中有几句话

New Deprecation Warnings
    The biggest change is that we’ve extracted React.PropTypes and React.createClass into their own packages. Both are still accessible via the main React object, but using either will log a one-time deprecation warning to the console when in development mode. This will enable future code size optimizations.

新的废弃警告。大意是React.PropTypes和React.createClass这2个功能在React 15.5.0之后版本(包括React 15.5.0)被废弃，虽然你仍然可以用这2个功能，但未来你的项目需要优化掉，未来就不再支持。  
所以我们使用了[prop-types][]第三方库。它完全可以替代`React.PropTypes`这个功能。

# 使用 #

## 安装 ##

npm install --save prop-types

就像我在[你真的理解devDependencies和dependencies区别吗?][devDependencies_dependencies]说的一样。这里使用了`--save`，安装在生产环境。

## 模块引入方式 ##

import PropTypes from 'prop-types'; // ES6
    var PropTypes = require('prop-types'); // ES5 with npm

## 实例 ##

//引入模块
    import React from 'react'
    import PropTypes from 'prop-types';
    class Home extends React.Component{ 
       render(){
            return (<div>我的名字：
                          {
       this.props.cname:PropTypes}
                        </div>)
                      }
    }
    //使用propTypes去验证Main组件里props属性类型
    Home.propTypes = {
            cname:PropTypes.string.isRequired,
    }
    //
    class Main extends React.Component{ 
        render(){
             return (<Home  cname:PropTypes = {
       'cy'}  />)
        }
    }

上面使用`PropTypes`属性要求`Home`组件的`cname`必需是字符串，而且必需填值，否则会报错，可以把`isRequired`去掉，那就只验证类型了。  
提练出来的套路就是

yourComponent.propTypes = {
        属性1：属性1的变量类型，
        属性2：属性2的变量类型
        //...
    }

按上面方式配置即可。

# react v15.5.0前后使用区别 #

// Before (15.4 and 更早版本)
    import React from 'react';
    
    class Component extends React.Component { 
      render() {
        return <div>{
       this.props.text}</div>;
      }
    }
    
    Component.propTypes = {
      text: React.PropTypes.string.isRequired,
    }
    
    // After (15.5 and 之后版本)
    import React from 'react';
    import PropTypes from 'prop-types';
    
    class Component extends React.Component { 
      render() {
        return <div>{
       this.props.text}</div>;
      }
    }
    
    Component.propTypes = {
      text: PropTypes.string.isRequired,
    };

# 其它可用验证类型 #

其它类型从下面找

import PropTypes from 'prop-types';
    
    MyComponent.propTypes = {
      // 你可以声明一个 prop 是一个特定的 JS 原始类型。 
      // 默认情况下，这些都是可选的。
      optionalArray: PropTypes.array,
      optionalBool: PropTypes.bool,
      optionalFunc: PropTypes.func,
      optionalNumber: PropTypes.number,
      optionalObject: PropTypes.object,
      optionalString: PropTypes.string,
      optionalSymbol: PropTypes.symbol,
    
      // 任何东西都可以被渲染:numbers, strings, elements,或者是包含这些类型的数组(或者是片段)。
      optionalNode: PropTypes.node,
    
      // 一个 React 元素。
      optionalElement: PropTypes.element,
    
      // 你也可以声明一个 prop 是类的一个实例。 
      // 使用 JS 的 instanceof 运算符。
      optionalMessage: PropTypes.instanceOf(Message),
    
      // 你可以声明 prop 是特定的值，类似于枚举
      optionalEnum: PropTypes.oneOf(['News', 'Photos']),
    
      // 一个对象可以是多种类型其中之一
      optionalUnion: PropTypes.oneOfType([
        PropTypes.string,
        PropTypes.number,
        PropTypes.instanceOf(Message)
      ]),
    
      // 一个某种类型的数组
      optionalArrayOf: PropTypes.arrayOf(PropTypes.number),
    
      // 属性值为某种类型的对象
      optionalObjectOf: PropTypes.objectOf(PropTypes.number),
    
      // 一个特定形式的对象
      optionalObjectWithShape: PropTypes.shape({
        color: PropTypes.string,
        fontSize: PropTypes.number
      }),
    
      // 你可以使用 `isRequired' 链接上述任何一个，以确保在没有提供 prop 的情况下显示警告。
      requiredFunc: PropTypes.func.isRequired,
    
      // 任何数据类型的值
      requiredAny: PropTypes.any.isRequired,
    
      // 你也可以声明自定义的验证器。如果验证失败返回 Error 对象。不要使用 `console.warn` 或者 throw ，
      // 因为这不会在 `oneOfType` 类型的验证器中起作用。
      customProp: function(props, propName, componentName) { 
        if (!/matchme/.test(props[propName])) {
          return new Error(
            'Invalid prop `' + propName + '` supplied to' +
            ' `' + componentName + '`. Validation failed.'
          );
        }
      },
    
      // 也可以声明`arrayOf`和`objectOf`类型的验证器，如果验证失败需要返回Error对象。
      // 会在数组或者对象的每一个元素上调用验证器。验证器的前两个参数分别是数组或者对象本身，
      // 以及当前元素的键值。
      customArrayProp: PropTypes.arrayOf(function(propValue, key, componentName, location, propFullName) { 
        if (!/matchme/.test(propValue[key])) {
          return new Error(
            'Invalid prop `' + propFullName + '` supplied to' +
            ' `' + componentName + '`. Validation failed.'
          );
        }
      })
    };

# 总结 #

`看懂上面内容，你完全学会`PropTypes`框架了，我说了，它就是配置类型库，拿来即用，不用特别记忆。`

[React v15.5.0]: https://reactjs.org/blog/2017/04/07/react-v15.5.0.html#migrating-from-react.proptypes
[prop-types]: https://www.npmjs.com/package/prop-types
[devDependencies_dependencies]: https://blog.csdn.net/achenyuan/article/details/80899783