React组件创建的时候,需要传入属性,我们可以使用使用PropTypes进行类型检查,您可以使用React.PropTypes在组件的道具上运行。

React.PropTypes.array 

React.PropTypes.bool

React.PropTypes.func

React.PropTypes.number

React.PropTypes.object

React.PropTypes.string

React.PropTypes.symbol

React.PropTypes.node

React.PropTypes.element

React.PropTypes.instanceOf()

React.PropTypes.oneOf()

React.PropTypes.oneOfType()

React.PropTypes.arrayOf()

React.PropTypes.objectOf()

React.PropTypes.shape()

React.PropTypes.any

默认情况下,验证器将props视为可选属性。您可以使用isRequired确保在未提供道具时显示警告。

 React.createClass({

  propTypes: {

    // 可以声明 prop 为指定的 JS 基本类型。默认

    // 情况下,这些 prop 都是可传可不传的。

    optionalArray: React.PropTypes.array,

    optionalBool: React.PropTypes.bool,

    optionalFunc: React.PropTypes.func,

    optionalNumber: React.PropTypes.number,

    optionalObject: React.PropTypes.object,

    optionalString: React.PropTypes.string,

    // 所有可以被渲染的对象:数字,

    // 字符串,DOM 元素或包含这些类型的数组。

    optionalNode: React.PropTypes.node,

    // React 元素

    optionalElement: React.PropTypes.element,

    // 用 JS 的 instanceof 操作符声明 prop 为类的实例。

    optionalMessage: React.PropTypes.instanceOf(Message),

    // 用 enum 来限制 prop 只接受指定的值。

    optionalEnum: React.PropTypes.oneOf(['News', 'Photos']),

    // 指定的多个对象类型中的一个

    optionalUnion: React.PropTypes.oneOfType([

      React.PropTypes.string,

      React.PropTypes.number,

      React.PropTypes.instanceOf(Message)

    ]),

    // 指定类型组成的数组

    optionalArrayOf: React.PropTypes.arrayOf(React.PropTypes.number),

    // 指定类型的属性构成的对象

    optionalObjectOf: React.PropTypes.objectOf(React.PropTypes.number),

    // 特定形状参数的对象

    optionalObjectWithShape: React.PropTypes.shape({

      color: React.PropTypes.string,

      fontSize: React.PropTypes.number

    }),

    // 以后任意类型加上 `isRequired` 来使 prop 不可空。

    requiredFunc: React.PropTypes.func.isRequired,

    // 不可空的任意类型

    requiredAny: React.PropTypes.any.isRequired,

    // 自定义验证器。如果验证失败需要返回一个 Error 对象。不要直接

    // 使用 `console.warn` 或抛异常,因为这样 `oneOfType` 会失效。

    customProp: function(props, propName, componentName) {

      if (!/matchme/.test(props[propName])) {

        return new Error('Validation failed!');

      }

    }

  },

  /* ... */

});

或者

    MyComponent.propTypes = {

        name:React.PropTypes.string

};

es6

class InputControlES6 extends React.Component {
constructor(props) {
super(props);
// 设置 initial state
this.state = {
text: props.initialValue || 'placeholder'
};
// ES6 类中函数必须手动绑定
this.handleChange = this.handleChange.bind(this);
}
handleChange(event) {
this.setState({
text: event.target.value
});
console.log(this.state.text);
}
render() {
return (
<div>
Type something:
<input onChange={this.handleChange}
value={this.state.text} />
</div>
);
}
}
InputControlES6.propTypes = {
initialValue: React.PropTypes.string
};
InputControlES6.defaultProps = {
initialValue: ''
};
ReactDOM.render(<InputControlES6/>,document.getElementById('example'))

【06】react 之 PropsType的更多相关文章

  1. 06——react组件的基本定义和使用

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. react hooks 如何自定义组件(react函数组件的封装)

    前言 这里写一下如何封装可复用组件.首先技术栈 react hooks + props-type + jsx封装纯函数组件.类组件和typeScript在这不做讨论,大家别白跑一趟. 接下来会说一下封 ...

  3. React报错之Parameter 'props' implicitly has an 'any' type

    正文从这开始~ 总览 当我们没有为函数组件或者类组件的props声明类型,或忘记为React安装类型声明文件时,会产生"Parameter 'props' implicitly has an ...

  4. react-router v6对比react-router v5

    简述:     1. react-router v6 原生支持typeScript ; 安装方法 npm install react-router-dom@6    2. react-router v ...

  5. React Native 开发之 (06) JSX

    一 React 1 React定义 React的GitHub地址是 https://github.com/facebook/react.它的官方介绍是 A JavaScript Library for ...

  6. [React] 06 - Route: koa makes your life easier

    听说koa比express更傻瓜化,真的? Koa 框架教程 本身代码只有1000多行,所有功能都通过插件实现,很符合 Unix 哲学. 搭建简单服务器 Koa, 架设一个简单的服务器 // demo ...

  7. React对比Vue(06 路由的对比)

    其实差不多, 都需要先安装路由 React  先安装 cnpm install react-router-dom --save 在再根组件引入 import { BrowserRouter as Ro ...

  8. React Native商城项目实战06 - 设置安卓中的启动页

    1.Main 目录下新建LaunchImage.js: /** * 启动页 */ import React, { Component } from 'react'; import { AppRegis ...

  9. React Native初探

    前言 很久之前就想研究React Native了,但是一直没有落地的机会,我一直认为一个技术要有落地的场景才有研究的意义,刚好最近迎来了新的APP,在可控的范围内,我们可以在上面做任何想做的事情. P ...

随机推荐

  1. java基础面试题:try{}里有一个return语句,那么紧跟在这个try后的finally {}里的code会不会被执行,什么时候被执行,在return前还是后?

    package com.swift; public class Try_Catch_Finally_Test { public static void main(String[] args) { /* ...

  2. Binary Agents-freecodecamp算法题目

    Binary Agents 1.要求 传入二进制字符串,翻译成英语句子并返回. 二进制字符串是以空格分隔的. 2.思路 用.split(' ')将输入二进制字符串转化为各个二进制数字符串组成的数组 用 ...

  3. ElasticSearch部署问题

    以下几个是以前在自己部署ElaticSearch的时候收集到的,认为有用的 https://my.oschina.net/topeagle/blog/591451?fromerr=mzOr2qzZ h ...

  4. pymysql模块操作数据库及连接报错解决方法

    import pymysql sql = "select host,user,password from user" #想要执行的MySQL语句 #sql = 'create da ...

  5. mybatis中实现动态SQL

    动态SQL语句,也就意味着SQL语句不在是一成不变的而是具有多样性. if if的用法还是跟平常差不多的(不过没有else if也没有else) <update id="modify& ...

  6. 基于 Generator 和 Iterator 的惰性列表

    初识 Lazy List 如果有了解过 Haskell 的朋友,对下面的这些表达一定不陌生 repeat 1 -- => [1, 1, 1, 1, 1,...] cycle "abc& ...

  7. Python入门第一课——Python的起源、发展与前景!

    我们在做任何一件事情之前,我们都会通过各种渠道去搜集事情的信息,了解事情的来龙去脉,学习一门编程语言也是如此,只有知根知底,我们才能有明确的方向和目标,以及底气去完成这件事情,今天我带大家来看看Pyt ...

  8. hadoop 启动or运行mr错误

    hadoop 错误:Incorrect configuration: namenode address dfs.namenode.servicerpc-address or dfs.namenode. ...

  9. Robot Framework Webdriver For Firefox FQA

    记录一下过程中使用的问题,希望大家碰到类似问题能够提高效率解决. 问题1.通过js脚本定位unieap框架网页中radio选项. 通过执行js脚本获取radio选项,并通过xpath路径点击. js脚 ...

  10. phpmyadmin4.8.1后台getshell

    phpmyadmin4.8.1后台getshell 包含文件进行getshell 姿势: ① 建立数据库的,新建表,字段名为一句话木马. 会生成对应的数据库文件,相应文件的路径查看 select @@ ...