对于组件来说

props是外来的 无法保证使用者传入什么格式的数据

传入的数据格式不对 可能会导致组件内部报错

关键问题:不知道报错的具体原因

1安装包props-types

2导入props-types

3组件名.propTypes={}添加规则

//导入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.protoTypes={
        colors:PropTypes.array
    }
     
    ReactDOM.render(<App colors={"1"}></App>, document.getElementById('root'))

好客租房55-props深入(2props校验)的更多相关文章

  1. 好客租房56-props深入(3props校验-约束规则)

    1常见类型:Array,bool,func,number,object,string 2React:element 3必填项:isRequred 4特定结构的想:shape({}) //导入react ...

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

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

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

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

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

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

  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. 使用css实现任意大小,任意方向, 任意角度的箭头

    使用css实现任意大小,任意方向, 任意角度的箭头 网页开发中,经常会使用到 下拉箭头,右侧箭头 这样的箭头. 一般用css来实现: { display: inline-block; margin: ...

  2. 全面系统讲解CSS工作应用+面试一步搞定

    [TOC] 一.课程介绍 二.HTML基础强化 html常见元素和理解 html常见元素分类 head区元素:(不会在页面上留下元素) * meta * title * style * link * ...

  3. JavaScript作用域链与闭包的理解

    作用域是JavaScript最重要的概念之一,想要学好JavaScript就需要理解JavaScript作用域和作用域 链的工作原理. 1. 全局作用域(Global Scope) (1)最外层函数和 ...

  4. sticker-footer 布局

    sticker-footer 1.嵌套层级不深,可直接继承自 body width:100%: height:100%; // html <body> <div id="s ...

  5. ES6-11学习笔记--函数的参数

    参数的默认值 与解构赋值结合 length属性 作用域 函数的name属性   ES5设置函数参数默认值: function foo(x, y) { y = y || 'world'; console ...

  6. script标签中defer和async的区别(稀土掘金学习)

    如果没有defer或async属性,浏览器会立即加载并执行相应的脚本.它不会等待后续加载的文档元素,读取到就会开始加载和执行,这样就阻塞了后续文档的加载. 下图可以直观的看出三者之间的区别: 其中蓝色 ...

  7. MFC---简介、编码、结构和消息响应

    MFC简介 MFC是微软基础类库的简称,是微软公司实现的一个c++类库,主要封装了大部分的windows API函数 在MFC中,可以直接调用 windows API,同时需要引用对应的头文件或库文件 ...

  8. 20220406Java

    记个笔记 字符串操作类中s1.compareTo(s)规则: Compares two strings lexicographically. The comparison is based on th ...

  9. 深入剖析 RocketMQ 源码 - 负载均衡机制

    RocketMQ作为一款流行的消息中间件在各大互联网应用广泛,本文主要分析RocketMq在消息生产和消费过程中的负载均衡机制,并创新提出消费端负载均衡策略的改写以实现固定IP消费的可能.

  10. Ubu18安装RabbitMQ

    RabbitMQ安装 https://www.jianshu.com/p/5c8c4495827f 安装 RabbitMQ基于erlang语言,需要先安装 sudo apt-get install e ...