8. react 基础 - props 默认值和类型限制 与 Props , State , render 函数 关系
一. PropTypes 与 DefaultProps 官方文档
1. PropTypes 属性校验
引入 PropTypes
import PropTypes from 'prop-types';
强校验 props 属性
eg:
import React, { Component } from 'react'
import PropTypes from 'prop-types'
class TodoItem extends Component{
constructor(props){
super(props);
}
}
// 校验 传递过来的 value 为 string 类型
// 校验 传递过来的 itemDelete 为 function 类型
// 校验 传递过来的 index 为 string 类型 并且必须要传递
// 如果传递的数据不对 会在 控制太报一个警告
TodoItem.propTypes = {
value: PropTypes.string,
itemDelete: PropTypes.func,
index: PropTypes.string.isRequired
}
export default TodoItem;
2.DefaultProps 设置默认值
eg:
import React, { Component } from 'react'
class TodoItem extends Component{
constructor(props){
super(props);
}
}
// 设置 props 的 test默认属性为 hello world
TodoItem.defaultProps = {
test: 'hello world'
}
export default TodoItem;
二. Props , State , render 函数 关系
// 当组件 的 props 和 state 发生改变时 render 方法会重新执行
// 当父组件 的 render 函数被运行时, 子组件 的 render 都会被运行
8. react 基础 - props 默认值和类型限制 与 Props , State , render 函数 关系的更多相关文章
- Swift语言指南(七)--语言基础之布尔值和类型别名
原文:Swift语言指南(七)--语言基础之布尔值和类型别名 布尔值 Swift有一个基本布尔类型,叫做布尔(bool),布尔值又称逻辑值(logical),因为它只能为真(true)或假(false ...
- React传值,验证值的类型和默认值
const ele = <Ff const={'哈哈'} index={55}></Ff> let box = document.querySelector('#app') / ...
- 十、React 父组件传来值的类型控制propTypes、父组件如果不传值defaultProps
父组件给子组件传值时: 1.defaultProps:父子组件传值中,如果父组件调用子组件的时候不给子组件传值,可以在子组件中使用defaultProps定义的默认值: 2.propTypes:验证父 ...
- react input 设置默认值
1.text类型 <input type="text" value={默认值} /> ,这种写法可以显示默认值,但不能对输入框进行编辑 正确写法: <input ...
- react中属性默认值是true?
看到项目代码中 return ( <MyWebView state="Login" title="登录app" ref="login" ...
- php基础--取默认值以及类的继承
(1)对于php的默认值的使用和C++有点类似,都是在函数的输入中填写默认值,以下是php方法中对于默认值的应用: <?phpfunction makecoffee($types = array ...
- JS基础_返回值的类型
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- vue props默认值国际化报错
未做国际化处理 tabLabel: { type: Array, default: () => (["a", "b", "c"]) } ...
- ES6 函数参数的默认值
基本用法 在ES6之前,不能直接为函数的参数指定默认值,只能采取变通的方法. function log(x,y){ y = y||'world'; console.log(x,y); } log('k ...
随机推荐
- 剑指offer 把字符串转化为整数
题目描述 将一个字符串转换成一个整数,要求不能使用字符串转换整数的库函数. 数值为0或者字符串不是一个合法的数值则返回0 输入描述: 输入一个字符串,包括数字字母符号,可以为空 输出描述: 如果是合法 ...
- hashCode() 和 equals()的问题解答及重写示范
本章的内容主要解决下面几个问题: 1 equals() 的作用是什么? 2 equals() 与 == 的区别是什么? 3 hashCode() 的作用是什么? 4 hashCode() 和 equa ...
- python反序列化漏洞
原理在网页源码中如果出现将用户输入数据进行反序列化当成参数输出时,出现漏洞,可造成任意命令执行例如网页源码try: become = self.get_argument('become') ...
- 17 Resources AssetBundle资源打包
Resources在Unity中可以使用www类加载远程文件或本地文件,或是在脚本中定义字段或数组从外部拖入. 在Unity中提供了Resources类读取资源要通过Resources类读取的文件必须 ...
- HihoCoder#1052:基因工程
HihoCoder#1052:基因工程 时间限制:1000ms 单点时限:1000ms 内存限制:256MB 描述 小Hi和小Ho正在进行一项基因工程实验.他们要修改一段长度为N的DNA序列,使得这段 ...
- 基于springboot实现Java阿里短信发送
1.接口TestController import java.util.Random; import com.aliyuncs.DefaultAcsClient; import com.aliyunc ...
- 《新标准C++程序设计》3.6-3.7(C++学习笔记9)
一.成员对象和封闭类 (1)定义 一个类的成员变量如果是另一个类的对象,就称之为“成员对象”. 包含成员对象的类叫封闭类. (2)封闭类构造函数的初始化列表 在构造函数中添加初始化列表的写法: 类名: ...
- SQL中行转列(PIVOT)与列转行(UNPIVOT)
一.行转列 1.测试数据准备 CREATE TABLE [StudentScores] ( ), --学生姓名 ), --科目 [Score] FLOAT, --成绩 ) 执行结果: 2.行转列sql ...
- WinForm读写App.config配置文件
一.配置文件概述: 应用程序配置文件是标准的 XML 文件,XML 标记和属性是区分大小写的.它是可以按需要更改的,开发人员可以使用配置文件来更改设置,而不必重编译应用程序.配置文件的根节点是conf ...
- webapi------宿主程序
业务场景: 公司的容器程序需要给前端暴露接口但是代码里面又不想写webapi项目工程就用到了宿主可以达到webapi的效果 1.owin实现 2.其他实现 测试实现如下 1.新建一个控制台程序 2.新 ...