1常见类型:Array,bool,func,number,object,string

2React:element

3必填项:isRequred

4特定结构的想:shape({})

//导入react
    import React from 'react'
    import ReactDOM from 'react-dom'
    import PropTypes from "prop-types"
    //导入组件
    // 约定1:类组件必须以大写字母开头
    // 约定2:类组件应该继承react.component父类 从中可以使用父类的方法和属性
    // 约定3:组件必须提供render方法
    // 约定4:render方法必须有返回值
     
    const App = (props) => {
        
            const arr = props.colors
            const lis = arr.map((item, index) => <li key={index}>{item}</li>)
            return <ul>{lis}</ul>
        
    }
    App.propTypes={
        colors:PropTypes.array,
        a:PropTypes.number,
        //节点
        tag:PropTypes.element
    }
     
    ReactDOM.render(<App colors={"1"}></App>, document.getElementById('root'))

好客租房56-props深入(3props校验-约束规则)的更多相关文章

  1. 好客租房55-props深入(2props校验)

    对于组件来说 props是外来的 无法保证使用者传入什么格式的数据 传入的数据格式不对 可能会导致组件内部报错 关键问题:不知道报错的具体原因 1安装包props-types 2导入props-typ ...

  2. JavaEE在职加薪课好客租房项目实战视频教程

    JavaEE在职加薪课好客租房项目实战视频教程课程介绍:       本课程采用SOA架构思想进行设计,基于目前主流后端技术框架SpringBoot.SpringMVC.Mybaits.Dubbo等来 ...

  3. 好客租房48-组件的props(基本使用)

    组件是封闭的 要接受外部数据应该通过props来实现 props的作用:接受传递给组件的数据 传递数据:给组件标签添加属性 接收数据:函数组件通过参数props接收数据 类组件通过this.props ...

  4. 好客租房49-组件的props(特点)

    特点 1可以给组件传递任意类型的数据 2props是只读的对象 只能读取属性的值 无法修改对象 3注意:使用类组件时 如果写了构造函数 应该将props传递给super() 否则 无法在构造函数 中获 ...

  5. 好客租房46-react组件进阶目标

    1能够使用props接收数据 2能够使用父子组件之间的通讯 3能够实现兄弟组件之间的通讯 4能够给组件添加props校验 5能够说出生命周期常用的钩子函数 6能够知道高阶组件的作用 组件通讯介绍 组件 ...

  6. 好客租房54-props深入(children属性)

    children属性 表示组件标签的子节点 当组件标签有子节点是 props就会有该属性 props中的组件可以是任意属性 都是可以渲染的 //导入react     import React fro ...

  7. 好客租房57-props深入(4props的默认值)

    1给props设置默认值 //导入react     import React from 'react'     import ReactDOM from 'react-dom'     import ...

  8. 好客租房53-context的使用

    app组件要传递给child组件 该如何处理 更好的姿势 跨组件传递数据 Provider 用来提供数据 Consumer用来消费数据 1调用React.createContext() 创建provi ...

  9. 好客租房43-react组件基础综合案例-4获取评论信息

    获取评论信息 1使用受控组件方式创建表单 //导入react import React from 'react' import ReactDOM from 'react-dom' //导入组件 // ...

随机推荐

  1. can总线第二讲

    一 CAN总线拓扑结构CAN是一种分布式的控制总线,总线上的每一个节点一般来说都比较简单,使用MCU控制器处理CAN总线数据,完成特定的功能:通过CAN总线将各节点连接只需较少的线缆(两根线:CAN_ ...

  2. 12_PID控制器_Matlab/Simulink仿真

    加入噪音后,查看p控制.pi控制.以及pid控制的结果 p控制和pi控制输出 pid控制的输出(微分对高频噪音比较敏感)

  3. js 关于setTimeout和Promise执行顺序问题

    js 关于setTimeout和Promise执行顺序问题 异步 -- Promise和setTimeout 执行顺序   Promise 和 setTimeout 到底谁先执行 定时器的介绍 Jav ...

  4. 走一步再走一步,揭开co的神秘面纱

    前言 原文地址 源码地址 了解co的前提是已经知晓generator是什么,可以看软大神的Generator 函数的语法,co是TJ大神写的能够使generator自动执行的函数库,而我们熟知的koa ...

  5. 关于sqlite数据库与sqlite studio

    今天使用了AS自带的sqlite实现了连接数据库,但是不能同步,比较麻烦,然后使用sqlite studio去设法实现同步,但是依旧无法创建成功,明天会继续调试.

  6. java中字符串池,String池,共享池到底是怎么回事?

    栈中有共享池的概念,比 如下面例子中,sz="hello";在栈中创建一个String对象引用变量sz,然后看看栈中有没有"hello",如果没有,则将&quo ...

  7. Paxos算法的一个简单小故事

    一.Paxos是什么? Paxos,它是一个基于消息传递的一致性算法,Leslie Lamport在1990年提出,近几年被广泛应用于分布式计算中,Google的Chubby,Apache的Zooke ...

  8. nmtui 工具使用的话,需要开启NetworkManager(网卡文件不存在ens192)

    环境采样: [root@k3master network-scripts]# cat /etc/redhat-release CentOS Linux release 7.2.1511 (Core) ...

  9. Oracle临时表空间语句、作用

    在Oracle数据库中:一个表空间只属于一个数据库使用:而一个数据库可以拥有多个表空间.属于"一对多"的关系 我们对照着mysql来理解. 1.Oracle有表空间,mysql没有 ...

  10. 坐实大数据资源调度框架之王,Yarn为何这么牛

    摘要:Yarn的出现伴随着Hadoop的发展,使Hadoop从一个单一的大数据计算引擎,成为大数据的代名词. 本文分享自华为云社区<Yarn为何能坐实资源调度框架之王?>,作者: Java ...