对于组件来说

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. Clickhouse 纯手工迁移表

    [应用场景] 由于一些未可知的原因,导致原表不可用,也不能恢复.通过手动迁移的方法来恢复业务 [解决办法] 新建一张 copy 表,把原表的 data 目录复制到新表的data 目录,并 attach ...

  2. 让你熟知jquery见鬼去吧

    $是jquery最具代表的符号,当然php也是,但是二者不能同日而语;不得不说jquery的选择器是大家赞不绝口的,在它1.x版本中对ie兼容性是最好的,这要归功于$选择器; 现在呢,html5的降临 ...

  3. es8(字符串,对象)

    es8(字符串,对象) 字符串补白: let str = "abc"; let a = str.padEnd(5); let b = str.padStart(5); let c ...

  4. SQLite实现数据库的储存2+SQLite数据库可视化工具SQLite Stadio

    今日所学 SQLite实现数据库的储存 查看数据库的两种方法 Android 中 SQLite 数据库的查看 - woider - 博客园 SQLite Studio安装教程 [SQLite]可视化工 ...

  5. window nginx 简单搭建服务器访问静态资源

    nginx命令: 启动: start nginx 停止:nginx -s stop ||  nginx -s quit 注:stop是快速停止nginx,可能并不保存相关信息:quit是完整有序的停止 ...

  6. Mybatis多表查询出现null字段

    写在前面 今天使用mybatis实现多表查询,记录一下其中遇到的坑 mybatis多表查询简介 mybatis多表查询主要有两个方式,通俗易懂的来说就是一个是查询少量属性(association),一 ...

  7. matplotlib---legend图例

    import numpy as np import matplotlib.pyplot as plt x = np.linspace(-3, 3, 50) y1 = 2 * x + 1 y2 = x ...

  8. 『现学现忘』Git基础 — 1、版本控制系统介绍

    在具体了解Git之前,首先需要我们了解一下VCS,即版本控制系统(version control system) 1.什么是版本控制系统 版本控制是一种记录一个或若干个文件内容变化,以便将来查阅特定版 ...

  9. cookie和localstorge、sessionStorge的区别

    一.背景由来 cookie原来是用来网络请求携带用户信息的,只不过在HTML5出现之前,前端没有本地存储的方法,只能使用cookie代替 localstorge.sessionStorge是html5 ...

  10. EmlParse:一款超轻量级的批量解析EML格式电子邮件的工具

    工具特点 1.绿色纯天然,无任何依赖库,文件大小不到150K: 2.可批量解析EML格式的电子邮件: 3.可提取EML文件中的正文和附件到指定目录: 4.可生成HTML格式的邮件列表清单,方便用户进行 ...