react中的属性验证

最新推荐文章于 2025-07-29 09:50:03 发布

原创最新推荐文章于 2025-07-29 09:50:03 发布 · 1.1k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#react #PropTypes

react学习笔记专栏收录该内容

14 篇文章

订阅专栏

本文详细介绍了PropTypes在React中的使用方法，包括如何验证各种类型的属性，并通过多个示例展示了如何为组件定义属性验证规则。

PropType导出一系列验证器，这些验证器可以用来确保接收到的数据是有效的。

在验证属性之前，要先安装一个propTypes库，执行npm i -S prop-types
使用之前要先引入prop-type
验证属性前要先定义好一个对象，添加属性验证
不要忘了将定义好的对象挂载在组件上面

我们可以设定一个属性是一个特定的js类型，默认情况下，下面的这些都是可选的

  PropTypes.array,
  PropTypes.bool,
  PropTypes.func,
  PropTypes.number,
  PropTypes.object,
  PropTypes.string,
  PropTypes.symbol,

看个简单的例子：

import PropTypes from 'prop-types';

class Greeting extends React.Component {
  render() {
    return (
      <h1>donna, {this.props.name}</h1>
    );
  }
}

Greeting.propTypes = {
  name: PropTypes.string
};

在这个例子中，我们使用了PropTypes字符串。当为name提供无效值时，将在JavaScript控制台中显示警告。出于性能原因，仅在开发模式中检查PropTypes。

PropTypes.node,//任何可以被渲染的节点（包括数字，字符串，元素和数组）
PropTypes.element,//一个react 元素，也包括组件

用法和上面的相同，所以就不再举例子了

PropTypes.oneOf(['news','photos'])//限制属性在特定的数值中

嗯、看例子

import PropTypes from 'prop-types';

class Greeting extends React.Component {
  render() {
    return (
      <h1>donna, {this.props.name}</h1>
    );
  }
}

Greeting.propTypes = {
  name: PropTypes.oneOf(['donna','leo','Mary','momo'])
};

将name的值限制在['donna','leo','Mary','momo']中，如果给name提供值不再这个数组中，那么浏览器就会报错提示

PropTypes.oneOfType([
PropTypes.string,
PropType.number
])//限制属性可以是多种类型之一

这个用法和上面的很相似，就不再举例了

PropTypes.arrayOf(PropTypes.number)//确定类型的数组

看下面的例子

import PropTypes from 'prop-types';

class Greeting extends React.Component {
  render() {
    return (
      <h1>donna, {this.props.arr}</h1>
    );
  }
}

Greeting.propTypes = {
  arr: PropTypes.arrayOf(PropTypes.object)
};

如果arr数组里面的值的类型不是对象的类型，浏览器就会报错

PropTypes.objectOf(PropTypes.number)//确定类型的对象

用法同上，不再举例

敲黑板划重点了，下面这个据说很重要

PropTypes.shape({
  color:PropTypes.string,
  fontSize:PropTypes.number
})
//验证属性的样式是否符合样式的设置

用法也很简单了，嗯，看下面

import PropTypes from 'prop-types';

class Greeting extends React.Component {
  render() {
    return (
      <h1>donna, {this.props.name}</h1>
    );
  }
}

Greeting.propTypes = {
  name: PropTypes.shape([
   color:PropTypes.string,
   fontSize:PropTypes.number
])
};

上面的例子中验证了name的颜色是不是字符串格式，字号是不是设置为数字格式

看完上面的例子有没有觉得，哇偶，好简单呐，嗯。其实就是这么so easy

嗯，接收一下挑战，看个稍微难一点点的

import React, {Component} from 'react';
import PropTypes from 'prop-types';//引入prop-type
let propTypes = {定义一个对象，添加属性验证
    time:PropTypes.string,
    content:PropTypes.string,
    name:PropTypes.string,
    subComment:PropTypes.arrayOf(PropTypes.object)
}

 export default class First extends React.Component{
    render(){

        let {date,time,name,content,avatar,subComment} = this.props;

        return <div className="first">
            <div className="wrap">
                <div className="img"><img src={avatar}/></div>
                <div className="ifo">
                    <p className="one"><span className="name">{name}</span><em className="time">{time}</em></p>
                    <p className="two"><span className="content">{content}</span></p>
                    <p><span><a className="rsp" href="javascript:;">回复</a></span></p>
                </div>
            </div>

        </div>
    }
 }
First.propTypes = propTypes;//将定义好的对象挂载在组件上面

React 提供了一个 isRequired 属性，其功能和html标签中'required'一致

PropTypes.func.isRequired

还是看例子吧

import PropTypes from 'prop-types';

class Greeting extends React.Component {
  render() {
    return (
      <h1>donna, {this.props.name}</h1>
    );
  }
}

Greeting.propTypes = {
  name: PropTypes.string.isRequired
};

name必须提供值，如果没有为name提供值，那么就会报错

默认属性 Default Props

为某个属性设置默认值，如果我们在提供数据的时候没有为该值设置值，那么这个属性值就为默认值

注意：验证属性的时候，默认值也会被验证

嗯，看例子

import PropTypes from 'prop-types';

class Greeting extends React.Component {
  render() {
    return (
      <h1>donna, {this.props.name}</h1>
    );
  }
}
Greeting.propTypes.defaultProps = {
  name:'donna'
} 
Greeting.propTypes = {
  name: PropTypes.string.isRequired
};

如果我们没有为name提供值，那么name的值就是donna，同时虽然name设置了必须设置，那即便我们没有为name提供值，此时也不会报错

OK，今天就聊这些了，有些说法是我自己认为的比较合适的说法，但也不确定是否准确，如果有什么说的不妥之处，欢迎提出您的宝贵意见。