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. vue-transition动画

    vue-transition动画 官网API: https://cn.vuejs.org/v2/guide/transitions.html demo点击显示与消失 <div id=" ...

  2. HttpServletRequest HttpServletResponse ServletException 重新打开后报红解决方法

    tomcat安装路径下\lib\servlet-api.jar 复制到Dynamic Web Project 的 WEB-INF/lib下,刷新

  3. oc描述器排序

    int main(int argc, const char * argv[]) { @autoreleasepool { NSArray *array = @[CreateDict(@"王思 ...

  4. JQuery模拟点击页面上的所有a标签,触发onclick事件

    注意: 这种方法需要给所有的a标签加上id属性 页面加载完成模拟点击所有的a标签: <script> $(function () { // 模拟点击页面上的所有a标签,触发onclick事 ...

  5. linux正则表达式企业级深度实践案例1

    linux正则表达式结合三剑客企业级实践: 1.取系统ip [root@redhat~]#  ifconfig  eth0 解答: 替换命令: sed  's#支持正则位置##g'  file 先取第 ...

  6. 安全 - 堡垒机 - Jumpserver

    GitHub - jumpserver/Dockerfile: Jumpserver all in one Dockerfile https://github.com/jumpserver/Docke ...

  7. Python导入模块方法

    import module_name 导入整个模块 from module_name import function_name 导入特定函数 from module_name import funct ...

  8. WebSocket 详解

    WebSocket 出现前 构建网络应用的过程中,我们经常需要与服务器进行持续的通讯以保持双方信息的同步.通常这种持久通讯在不刷新页面的情况下进行,消耗一定的内存资源常驻后台,并且对于用户不可见.在 ...

  9. 如何禁止js缓存?

    <html> <head> <script type="text/javascript"> document.write("<s ...

  10. java util - Hex转换工具

    测试代码 package cn.java.codec.hex; public class Test { public static void main(String[] args) { String ...