好客租房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' //导入组件 // ...
随机推荐
- 18个基于 HTML5 Canvas 开发的图表库
如今,HTML5 可谓如众星捧月一般,受到许多业内巨头的青睐.很多Web开发者也尝试着用 HTML 5 来制作各种各样的富 Web 应用.HTML 5 规范引进了很多新特性,其中之一就是 Canvas ...
- [译] Facebook:我们是如何构建第一个跨平台的 React Native APP
英文原文(需FQ):https://code.facebook.com/posts/1189117404435352/ 早些时候,我们介绍过iOS版的React Native. React Nativ ...
- ES6-11学习笔记--Generator
基本使用 function后面加个*号 function* foo() { for (let i = 0; i < 3; i++) { yield i; // yield不能作为构造函数去使用, ...
- 惠普电脑win10系统中WLAN不见了
原文链接:笔记本电脑win10系统中WLAN不见了 怎么解决? - 知乎 (zhihu.com)
- MongoDB从bson文件中恢复数据
首先需要到mangodb的安装目录的bin下面找到mongorestore.exe WIN10系统MongoDB安装目录bin文件夹下没有mongorestore.exe 先下载工具 https:/ ...
- jsp+servlet上传excel并将数据导入到数据库表的实现方法
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding= ...
- 启动两个jboss需要修改的端口号 (两个不能相同)
standalone-configuration-standalone.xml
- Spring MVC框架搭建及其详解
现在主流的Web MVC框架除了Struts这个主力 外,其次就是Spring MVC了,因此这也是作为一名程序员需要掌握的主流框架,框架选择多了,应对多变的需求和业务时,可实行的方案自然就多了.不过 ...
- js知识梳理6:关于函数的要点梳理(2)(作用域链和闭包)
写在前面 注:这个系列是本人对js知识的一些梳理,其中不少内容来自书籍:Javascript高级程序设计第三版和JavaScript权威指南第六版,感谢它们的作者和译者.有发现什么问题的,欢迎留言指出 ...
- 数组-LeetCode-笔试
目录 数组理论基础 二分查找 二分法第一种写法 二分法第二种写法 ACM 移除元素 暴力解法 双指针法(快慢指针) ACM 有序数组的平方 暴力排序 双指针法 长度最小的子数组 暴力解法 滑动窗口 相 ...