初识React(6)：propTypes类型检测

Brenner 发布于2019-08-23 11:33 / 2367人阅读

摘要：是中用来对参数进行类型检测的，当然要使用这个插件，得先安装这个插件，如下但是如果你是直接用创建的项目，无需安装，直接引入即可，如下上面那个例子中可以看出，要引入组件，必须得传入参数类型为字符串的参数，否则会报错常用的数据类型检测如下

propTypes是react中用来对参数进行类型检测的，当然要使用这个插件，得先安装这个插件，如下：

npm install prop-types --save

但是如果你是直接用dva创建的项目，无需安装，直接引入即可，如下：

import React from "react";
import PropTypes from "prop-types";

class PropType extends React.Component {
   render() {
     return (
       
        123
        {this.props.content}
       
     )
   }
}

PropType.propTypes = {
  content:PropTypes.string.isRequired
}
export default PropType;

上面那个例子中可以看出，要引入组件PropType，必须得传入参数类型为字符串的content参数，否则会报错

import React from "react";
import { connect } from "dva";
import PropType from "./propTypes/propTypes.js"

function IndexPage() {
  return (
    
      
    
  );
}

IndexPage.propTypes = {
};

export default connect()(IndexPage);

PropTypes常用的数据类型检测如下：

字符串类型PropTypes.string

布尔类型PropTypes.bool

函数类型PropTypes.func

数组类型PropTypes.array

数字类型PropTypes.number

对象类型PropTypes.object

元素PropTypes.element

传入任何东西都可以PropTypes.node

选择特定值PropTypes.oneOf(["是", "否", "是否"])

选择诸多类型中的一种（任意类型）PropTypes.oneOfType：

PropTypes.oneOfType([
    PropTypes.string,
    PropTypes.number
  ]),

11.具有某种类型的数组PropTypes.arrayOf(PropTypes.number)：

PropTypes.arrayOf(PropTypes.number)

12.具有某种类型属性值的对象PropTypes.objectOf(React.PropTypes.number)

PropTypes.objectOf(React.PropTypes.number)

13.样式类型PropTypes.shape

PropTypes.shape({
    color: PropTypes.string,
    fontSize: PropTypes.number
  })

14.任何数据类型PropTypes.any.isRequired

注意： isRequired表示必要的参数，如果设置了isRequired没有参数传过来，则会报错

PropTypes比较常用的应该就是以上那些类型了，如果后期有新发现会不间断更新文章。

云服务器 GPU云服务器类型检测 PropTypes js中的6大数据类型以及应用 java 检测类型

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/97130.html

初识redux

摘要：主要用于构建，很多人认为是中的视图。函数接受另一个函数作为参数，返回新生成的对象的变化，会导致的变化。用户无法直接改变只能触发上绑定的事件。表示应该要发生变化了。允许使用方法设置监听函数，一旦发生变化，就自动执行这个函数。什么是react React 是一个用于构建用户界面的 JAVASCRIPT 库。React主要用于构建UI，很多人认为 React 是 MVC 中的 V（视图）。...

xumenger 2019-08-22 16:13 评论0 收藏0
React系列---React（二）组件的prop和state

摘要：给赋值也是构造函数的工作之一。在的构造函数中，还给两个成员函数绑定了当前的执行环境，因为方式创建的组件并不自动给我们绑定到当前实例对象。我们可以利用的功能，避免判断逻辑这种充斥在构造函数之中，让代码更优。 React系列---React（一）初识ReactReact系列---React（二）组件的prop和stateReact系列---React（三）组件的生命周期组件是React...

Labradors 2019-08-20 17:33 评论0 收藏0
基于 react, redux 最佳实践构建的 2048

摘要：最佳实践一个文件一个组件。，这是包含的是无副作用的纯函数式计算状态操作的函数。，的启动脚本，启动开发模式，项目打包，运行单元测试等等。每次代码推送到之前也会执行所有单元测试用例，全部通过才可以继续推送。，首次安装依赖包之后生成的文件。前段时间 React license 的问题闹的沸沸扬扬，搞得 React 社区人心惶惶，好在最终 React 团队听取了社区意见把 license 换...

Eidesen 2019-08-21 17:00 评论0 收藏0
前端面试日记（二）

摘要：面试时间晚上时长小时分钟公司，一面一简单的介绍下自己介绍的真的很简单。。。。。。二平时都是怎么学习前端的学习前端的话，我主要是以书籍为主然后是网站视频博客文档等学习理论，之后再通过代码实践。。。大概是在6月11号在Boss直聘投的简历，6月12号中午收到电话约的面试时间，刚开始说是13号晚上7点；后面可能时间有变，中午来了个电话说改到9-10点；怎么说算是第一次面试自己目标公司之一吧...

huayeluoliuhen 2019-08-02 16:02 评论0 收藏0
前端面试日记（二）

摘要：面试时间晚上时长小时分钟公司，一面一简单的介绍下自己介绍的真的很简单。。。。。。二平时都是怎么学习前端的学习前端的话，我主要是以书籍为主然后是网站视频博客文档等学习理论，之后再通过代码实践。。。大概是在6月11号在Boss直聘投的简历，6月12号中午收到电话约的面试时间，刚开始说是13号晚上7点；后面可能时间有变，中午来了个电话说改到9-10点；怎么说算是第一次面试自己目标公司之一吧...

zombieda 2019-08-22 18:05 评论0 收藏0