好客租房57-props深入(4props的默认值)
1给props设置默认值
//导入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,
}
App.defaultProps = {
colors: ['red', 'blue'],
}
ReactDOM.render(<App></App>, document.getElementById('root'))
好客租房57-props深入(4props的默认值)的更多相关文章
- JavaEE在职加薪课好客租房项目实战视频教程
JavaEE在职加薪课好客租房项目实战视频教程课程介绍: 本课程采用SOA架构思想进行设计,基于目前主流后端技术框架SpringBoot.SpringMVC.Mybaits.Dubbo等来 ...
- props default 数组/对象的默认值应当由一个工厂函数返回
export default {props: { slides:{ type:Array, default:[] } },这是我的代码 报错是Invalid default value for pro ...
- Invalid default value for prop "value": Props with type Object/Array must use a factory function to return the default value.(props default 数组/对象的默认值应当由一个工厂函数返回)
Invalid default value for prop "value": Props with type Object/Array must use a factory fu ...
- 关于props default 数组/对象的默认值应当由一个工厂函数返回
export default {props: { xAxisData: { type: Array, default: [] }, },这是我的代码 报错是Invalid default va ...
- Vue props中Object和Array设置默认值
Vue中,在props中设置Object和Array的默认值 seller: { type: Object, default() { return {} } } seller: { type: Obj ...
- 8. react 基础 - props 默认值和类型限制 与 Props , State , render 函数 关系
一. PropTypes 与 DefaultProps 官方文档 1. PropTypes 属性校验 引入 PropTypes import PropTypes from 'prop-types'; ...
- 为什么在使用get时,Properties对象总是忽略默认值?
不应该对Properties对象调用get方法:而应该调用getProperty方法.许多人认为二者的区别是getProperty声明了返回值为String类型,而get声明的返回值类型为Object ...
- 封装input 逐渐,且input插件必须带有默认值。
封装input 逐渐,且input插件必须带有默认值. 组件: <template> <div class="input-show"> <span c ...
- MySQL 5.6比较重要的参数,以及5.5到5.6默认值有过变化的参数
新参数说明和设置,这里说下5.6比较重要的参数,以及5.5到5.6默认值有过变化的参数. MySQL Server参数: 1,optimizer_switch:优化器选项. Variable_name ...
随机推荐
- 微信小程序要求HTTPS,如何选择SSL证书?
为了保护小程序应用安全,微信官方的需求文档要求,每个微信小程序必须事先设置一个通讯域名,并通过HTTPS请求进行网络通信,不满足条件的域名和协议无法请求.因此开发者应先准备好配置好HTTPS证书的域名 ...
- 走在 SVG + Low Poly 的路上
随着 SVG 的发展,艺术家和设计师们把越来越多传统设计行业的东西引入了前端, low poly 就是其中之一.那 low poly 强大在哪呢,大家通过下面的图来感受一下. 恰巧我们产品 Logo ...
- PAT B1042 字符统计
请编写程序,找出一段给定文字中出现最频繁的那个英文字母. 输入格式: 输入在一行中给出一个长度不超过 1000 的字符串.字符串由 ASCII 码表中任意可见字符及空格组成,至少包含 1 个英文字母, ...
- 使用Vue_CLI_3快速创建项目
- Blazor技术开发了一个访客管理系统
简单介绍一下系统功能 该系统为了在疫情期间能很好管理访客登记做好风险管控,同时可以整合智能设备做到自动确认并跟踪访客的行动轨迹,该项目完全开源. 系统流程 访客可以同通过手机进行预注册,同时上传照片, ...
- MongoDB 数据库开发规范
MongoDB 数据库开发规范 转载自-落雨_ https://developer.aliyun.com/article/255536 简介: mongoDB库的设计 mongodb数据库命名规范:d ...
- 帝国CMS后台采集关键字的方法
小伙伴们知道帝国CMS后台的采集功能是不能采集关键字的,那么老墨今天给大家说一个变通方法,让后台能采集关键字!方法如下: 1.系统设置--管理数据表--管理字段--增加字段(字段名:keywords字 ...
- Collection工具类
Collection工具类: 集合工具类,定义除了存取以外的集合常用方法 方法: public static void reverse(List<?> list) //反转集合中元素的 ...
- python基础练习题(题目 递归求等差数列)
day20 --------------------------------------------------------------- 实例028:递归求等差数列 题目 有5个人坐在一起,问第5个 ...
- jointJS初使用随记
jointJs使用随记 1.下载与安装 前提:一个健康良好且干净的vue脚手架项目. 还是普遍的安装方式 yarn:yarn add jointjs npm:npm install jointjs 还 ...