好客租房56-props深入(3props校验-约束规则)
1常见类型:Array,bool,func,number,object,string
2React:element
3必填项:isRequred
4特定结构的想:shape({})
//导入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.propTypes={
colors:PropTypes.array,
a:PropTypes.number,
//节点
tag:PropTypes.element
}
ReactDOM.render(<App colors={"1"}></App>, document.getElementById('root'))
好客租房56-props深入(3props校验-约束规则)的更多相关文章
- 好客租房55-props深入(2props校验)
对于组件来说 props是外来的 无法保证使用者传入什么格式的数据 传入的数据格式不对 可能会导致组件内部报错 关键问题:不知道报错的具体原因 1安装包props-types 2导入props-typ ...
- JavaEE在职加薪课好客租房项目实战视频教程
JavaEE在职加薪课好客租房项目实战视频教程课程介绍: 本课程采用SOA架构思想进行设计,基于目前主流后端技术框架SpringBoot.SpringMVC.Mybaits.Dubbo等来 ...
- 好客租房48-组件的props(基本使用)
组件是封闭的 要接受外部数据应该通过props来实现 props的作用:接受传递给组件的数据 传递数据:给组件标签添加属性 接收数据:函数组件通过参数props接收数据 类组件通过this.props ...
- 好客租房49-组件的props(特点)
特点 1可以给组件传递任意类型的数据 2props是只读的对象 只能读取属性的值 无法修改对象 3注意:使用类组件时 如果写了构造函数 应该将props传递给super() 否则 无法在构造函数 中获 ...
- 好客租房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' //导入组件 // ...
随机推荐
- Ubuntu 18.04 磁盘根目录在线扩容 & 修改分区 inode 数量
Ubuntu 18.04 磁盘根目录在线扩容 & 修改分区 inode 数量 Ubuntu 作为服务器系统使用的时候,系统盘的空间可能并不是很充裕,apt apt 着,根目录就满了.诚然, ...
- ROS学习文章
ros机器人到底有没有必要学习?
- Mac 安装WordPress
Mac 安装WordPress 一.环境要求 PHP 5.2.4或更新版本 MySQL 5.0或更新版本 WebServer(可以选择Apache.nginx等支持PHP的,这里我选择Apache) ...
- CSS3 用border写 空心三角箭头 (两种写法)
之前一直在寻找这种空心三角箭头, 终于知道了原理! 自己记录一下,顺便分享给之前跟我一样想要的撸友们~ 第一种写法 利用常见的 after伪元素 <!DOCTYPE html> <h ...
- chrome插件one-read开发1:准备
阅读我的博客文章:chrome插件one-read开发:准备 前言 为啥要做这个,因为我原本想用chrome做一个书签管理的东西,但是很久没有碰过chrome的插件开发了.所以先做一个简单的,来熟悉下 ...
- 讲清楚之 javascript 参数传值
讲清楚之 javascript 参数传值 参数传值是指函数调用时,给函数传递配置或运行参数的行为,包括通过call.apply 进行传值. 在实际开发中,我们总结javascript参数传值分为基本数 ...
- 【Android开发】Android6.0请求权限方式
记录一下最普通的动态请求权限的方法: private int requestCode == 123; //判断当前系统的版本 if(Build.VERSION.SDK_INT >= 23){ i ...
- mysql数据乱码
更改数据库安装时的字符编码.打开mysql安装目录,找到my.ini文件,通过使用记事本的方式打开,将这里面的default-character-set=latin1修改成gbk,注意这里面有两处需要 ...
- eclipse 执行main方法 错误: 找不到或无法加载主类
检查环境变量是否正确 JAVA_HOME JAVA的实际安装目录 CLASSPATH .;%JAVA_HOME%\lib;%JAVA_HOME%\lib\dt.jar;%JAVA_HOME%\lib\ ...
- jupyter notebook 调用.py文件
方法1.利用 %run xx.py 直接运行得出结果. 方法2:利用 %load xx.py 载入代码再点击Run运行,这种方法的好处是可以方便修改代码. 说明: Jupyter Notebook中以 ...