对于组件来说

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. sublime text3 好用的插件

    sublime text3 推荐插件 Package Controller安装 1.打开sublime text 3,按ctrl+~或者菜单View > Show Console打开命令窗口.2 ...

  2. html和css常见的一些问题总结

    html 标签 一般在html有块级元素和行级元素,主要的块级元素有 div,p,h1-h6,ul,ol,li,dl,dt,dd,table,tr,th,td,有好记的办法,div,p,显示标题的,列 ...

  3. HTML中meta标签详解;property=og标签详解

    meta是用来在HTML文档中模拟HTTP协议的响应头报文.META标签是HTML语言HEAD区的一个辅助性标签,它位于HTML文档头部的<HEAD>标记和<TITLE>标记之 ...

  4. C#编写一个控制台应用程序,输入正方形边长或者半径,计算其周长和面积并输出

    编写一个控制台应用程序,输入正方形边长或者半径,计算其周长和面积并输出 (1) 编写两个接口,接口 IShape 包含三个方法:initialize, getPerimeter, getArea.分别 ...

  5. Smith数的判断

    题目描述: smith数是指满足下列条件的可分解的整数: 其所有位数上的数字和等于其全部素数因子的数字之和. 例如,9975是smith数,9975=3*5*5*7*19,即9975的数字和=因子的数 ...

  6. IO流入门

    @ 目录 总结内容 1. IO流是什么 2. 字符流和字节流 3. File常用API(前面类型为返回类型) 4. 编码转换 5. IO流实现流程 6. 输入输出流简单实现 7. 输入输出流简单实现 ...

  7. DOS控制台

    :win+r--cmd--回车* A:d: 回车 盘符切换* B:dir(directory):列出当前目录下的文件以及文件夹* C:cd (change directory)改变指定目录(进入指定目 ...

  8. Make-learning

    Make学习笔记 make是工具,Makefile是指导make工作的文件,而CMake则是生成Makefile的工具 要点: 终极目标是Makefile里面的第一个规则目标 目标下面的命令必须接的是 ...

  9. python3拉勾网爬虫之(您操作太频繁,请稍后访问)

    你是否经历过这个:那就对了~因为需要post和相关的cookie来请求~所以,一个简单的代码爬拉钩~~~

  10. 【图文教学】如何轻松下载tiktok上的视频

    我是真诚的想和大家分享这个办法的!这个叫光影存图,图标就是这个绿色的箭头,我是苹果手机,安卓手机也可以用,就是它分免费版和会员版的,没有强制要你充会员,看一下广告就可以获取下载次数,我就是这么干的,只 ...