好客租房55-props深入(2props校验)
对于组件来说
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校验)的更多相关文章
- 好客租房56-props深入(3props校验-约束规则)
1常见类型:Array,bool,func,number,object,string 2React:element 3必填项:isRequred 4特定结构的想:shape({}) //导入react ...
- JavaEE在职加薪课好客租房项目实战视频教程
JavaEE在职加薪课好客租房项目实战视频教程课程介绍: 本课程采用SOA架构思想进行设计,基于目前主流后端技术框架SpringBoot.SpringMVC.Mybaits.Dubbo等来 ...
- 好客租房49-组件的props(特点)
特点 1可以给组件传递任意类型的数据 2props是只读的对象 只能读取属性的值 无法修改对象 3注意:使用类组件时 如果写了构造函数 应该将props传递给super() 否则 无法在构造函数 中获 ...
- 好客租房48-组件的props(基本使用)
组件是封闭的 要接受外部数据应该通过props来实现 props的作用:接受传递给组件的数据 传递数据:给组件标签添加属性 接收数据:函数组件通过参数props接收数据 类组件通过this.props ...
- 好客租房46-react组件进阶目标
1能够使用props接收数据 2能够使用父子组件之间的通讯 3能够实现兄弟组件之间的通讯 4能够给组件添加props校验 5能够说出生命周期常用的钩子函数 6能够知道高阶组件的作用 组件通讯介绍 组件 ...
- 好客租房54-props深入(children属性)
children属性 表示组件标签的子节点 当组件标签有子节点是 props就会有该属性 props中的组件可以是任意属性 都是可以渲染的 //导入react import React fro ...
- 好客租房57-props深入(4props的默认值)
1给props设置默认值 //导入react import React from 'react' import ReactDOM from 'react-dom' import ...
- 好客租房53-context的使用
app组件要传递给child组件 该如何处理 更好的姿势 跨组件传递数据 Provider 用来提供数据 Consumer用来消费数据 1调用React.createContext() 创建provi ...
- 好客租房43-react组件基础综合案例-4获取评论信息
获取评论信息 1使用受控组件方式创建表单 //导入react import React from 'react' import ReactDOM from 'react-dom' //导入组件 // ...
随机推荐
- C++ | 程序编译连接原理
文章目录 预编译(生成*.i文件) 编译(生成*.s文件) 汇编(生成*.o文件,也叫目标文件) 链接(生成*.exe文件,也叫可执行文件) 汇编--目标文件 查看文件头 查看符号表 查看 .o 文件 ...
- Numpy求解线性方程组
Numpy求解线性方程组 对于Ax=b,已知A和b,怎么算出x? 1. 引入包 2. 求解 验证
- H.265
Baseline支持I/P 帧,只支持无交错(Progressive)和CAVLC一般用于低阶或需要额外容错的应用,比如视频通话.手机视频等: Main支持I/P/B 帧,无交错(Progressiv ...
- java中的方法(method)到底怎么用?给个例子
7.方法(method) 被调例子, int add(int x, int y){ return x+y; } 主调例子, for example: int result = add(5,3); ...
- Java多线程与线程池技术
一.序言 Java多线程编程线程池被广泛使用,甚至成为了标配. 线程池本质是池化技术的应用,和连接池类似,创建连接与关闭连接属于耗时操作,创建线程与销毁线程也属于重操作,为了提高效率,先提前创建好一批 ...
- HTTP长连接和短连接及应用情景
HTTP短连接 HTTP/1.0中默认使用短连接, 客户端和服务器进行一次HTTP操作, 就需要建立一次连接, 任务结束连接也关闭. 当客户端浏览器访问的web网页中包含其他的web资源时, 每遇到一 ...
- 在非k8s 环境下 的应用 使用 Dapr Sidekick for .NET
在k8s 环境下,通过Operator 可以管理Dapr sidecar, 在虚拟机环境下,我们也是非常需要这样的一个管理组件,类似下图:在这张图片中,在上图左面,我们看到了"dapr.ex ...
- 4.Docker容器学习之Dockerfile入门到放弃
原文地址: 点击直达 0x01 Dockerfile 编写 描述:Dockerfile是一个文本格式的配置文件,其内包含了一条条的指令(Instruction),每一条指令构建一层,因此每一条指令的内 ...
- css 第二排文字居中
text-align: center; 超过长度 自动换行居中
- android软件简约记账app开发day01-今日收支明细的界面绘制
android软件简约记账app开发day01-今日收支明细的界面绘制 导入素材 导入在阿里iconfront图标库下载的字体图标分为大小两种,分别导入到项目目录mipmap-hdpi和mipmap- ...