React-propTypes类型校验

待我称王封你为后i 2023-07-05 13:09 58阅读 0赞

有时在组件之间进行传递数据时需要对数据的类型进行校验，react 中提供了类型检查的模块 `prop-types` 通过该模块可以对传递的数据进行类型检测，出于性能方面的考虑，`propTypes` 仅在开发模式下进行检查。

使用方法：

1.  使用时首先要导入该模块：
    
        import PropTypes from 'prop-types'
2.  导入完成后，为接收数据的组件设置类型检查：
    
        // myComponent 接收数据的组件
        myComponent.propTypes = { 
          // 检测基本数据类型，这些属性都是可选的，属性名是为组件传递数据时定义的属性
          // 检查 optionalArray 的值是否为数组
          optionalArray: PropTypes.array,
          // 检查 optionalBool 的值是否为布尔类型
          optionalBool: PropTypes.bool,
          // 检查 optionalFunc 的值是否为函数
          optionalFunc: PropTypes.func,
          // 检查 optionalNumber 的值是否为数字
          optionalNumber: PropTypes.number,
          // 检查 optionalObject 的值是否为对象
          optionalObject: PropTypes.object,
          // 检查 optionalString 的值是否为字符串
          optionalString: PropTypes.string,
          // 检查 optionalSymbol 的值是否为Symbol类型
          optionalSymbol: PropTypes.symbol
        }
    
    检查规则有很多，具体可以看[官方文档][Link 1]

来个简单的示例：

import React from 'react'
    import ReactDOM from 'react-dom'
    // 导入检查的模块，自 React v15.5 起，React.PropTypes 已移入 ‘prop-types’ 包中
    import PropTypes from 'prop-types'
    
    // 创建 Father 组件
    class Father extends React.Component { 
      state = { 
        // 组件中的数据（用于测试）
        msg: 123
        // msg: 'Father msg'
      }
      
      /* 也可以将类型检查作为静态属性 */
      // 为 Son 组件设置类型检查，如果数据类型不匹配就会报错
      /*static propTypes = { // pmsg 的属性值是否为字符串 pmsg: PropTypes.string, // pfun 的属性值是否为函数 pfun: PropTypes.func }*/
      
      render () { 
        return (
          <div>
            <h1>Father 组件</h1>
            { /* 使用 Son 组件，并传递数据 */}
            <Son pmsg={ this.state.msg} pfun={ this.fn.bind(this)}></Son>
          </div>
        )
      }
      fn () { 
        console.log('Father fn')
      }
    }
    
    // 创建 Son 组件
    class Son extends React.Component { 
      render () { 
        return (
          <div>
            <h1>Son 组件</h1>
            <button onClick={ this.func.bind(this)}>按钮</button>
          </div >
        )
      }
      func () { 
        this.props.pfun()
      }
    }
    
    // 为 Son 组件设置类型检查，如果数据类型不匹配就会报错
    Son.propTypes = { 
      // pmsg 的属性值是否为字符串
      pmsg: PropTypes.string,
      // pfun 的属性值是否为函数
      pfun: PropTypes.func
    }
    
    ReactDOM.render(<Father />, document.getElementById('root'))

![在这里插入图片描述][20200215093519165.gif]

[Link 1]: https://zh-hans.reactjs.org/docs/typechecking-with-proptypes.html
[20200215093519165.gif]: https://img-blog.csdnimg.cn/20200215093519165.gif