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的默认值)的更多相关文章

  1. JavaEE在职加薪课好客租房项目实战视频教程

    JavaEE在职加薪课好客租房项目实战视频教程课程介绍:       本课程采用SOA架构思想进行设计,基于目前主流后端技术框架SpringBoot.SpringMVC.Mybaits.Dubbo等来 ...

  2. props default 数组/对象的默认值应当由一个工厂函数返回

    export default {props: { slides:{ type:Array, default:[] } },这是我的代码 报错是Invalid default value for pro ...

  3. 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 ...

  4. 关于props default 数组/对象的默认值应当由一个工厂函数返回

    export default {props: { xAxisData: {   type: Array,   default: [] }, },这是我的代码 报错是Invalid default va ...

  5. Vue props中Object和Array设置默认值

    Vue中,在props中设置Object和Array的默认值 seller: { type: Object, default() { return {} } } seller: { type: Obj ...

  6. 8. react 基础 - props 默认值和类型限制 与 Props , State , render 函数 关系

    一. PropTypes 与 DefaultProps 官方文档 1. PropTypes 属性校验 引入 PropTypes import PropTypes from 'prop-types'; ...

  7. 为什么在使用get时,Properties对象总是忽略默认值?

    不应该对Properties对象调用get方法:而应该调用getProperty方法.许多人认为二者的区别是getProperty声明了返回值为String类型,而get声明的返回值类型为Object ...

  8. 封装input 逐渐,且input插件必须带有默认值。

    封装input 逐渐,且input插件必须带有默认值. 组件: <template> <div class="input-show"> <span c ...

  9. MySQL 5.6比较重要的参数,以及5.5到5.6默认值有过变化的参数

    新参数说明和设置,这里说下5.6比较重要的参数,以及5.5到5.6默认值有过变化的参数. MySQL Server参数: 1,optimizer_switch:优化器选项. Variable_name ...

随机推荐

  1. 使用 jfinal + beetl + bootstrap 实现商城展示及管理系统

    使用 jfinal+beetl 在线商品展示系统 使用 git clone https://github.com/zhouchong741/jfinal-demo.git 使用 IntelliJ ID ...

  2. 订单突破10000+,仅花1小时,APPx独家深入剖析背后的秘密!

    拼多多:成立三年,获客三亿,月订单成交额达到恐怖的400亿,成功上市! 糕妈优选:营销活动推送1小时,订单超过10000+,商品成功刷屏朋友圈! 寻慢:一场活动净增7000+粉丝,付款转化率高达71% ...

  3. HTML5 Audio & Video 属性解析

    一.HTML 音频/视频 方法 play() play() 方法开始播放当前的音频或视频. var myVideo=document.getElementById("video1" ...

  4. C#枚举-通过值获取名字,通过名称获取值

    public enum ProtoType { Move = 1, Enter = 2, Leave = 3, Attack, Die, } print("ProtoType.Move:&q ...

  5. 'utf-8' codec can't decode byte 0x8b in position 1: invalid start byte

    问题描述:在使用python爬取斗鱼直播的数据时,使用str(读取到的字节,编码格式)进行解码时报错:'utf-8' codec can't decode byte 0x8b in position ...

  6. ubantu系统之jdk切换使用

    安装 jdk7: $ sudo apt-get update $ sudo apt-get install openjdk-7-jdk 安装 jdk1.8:sudo add-apt-repositor ...

  7. Android修改app图标

    1.按照路径找到AndroidManifest.xml中的icon 2.在drawable添加一个png图片 3.然后在AndroidManifest.xml中的icon,修改其中的值 android ...

  8. 判断H5页面是在小程序的webview环境中,还是在微信环境中,还是不在微信

    <script src="https://res2.wx.qq.com/open/js/jweixin-1.6.0.js" type="text/javascrip ...

  9. Python网络爬虫 - 爬取中证网银行相关信息

    最终版:07_中证网(Plus -Pro).py # coding=utf-8 import requests from bs4 import BeautifulSoup import io impo ...

  10. 蓝桥杯 贪吃蛇长度java实现

    小明在爷爷的私人收藏馆里找到一台老式电脑.居然没有图形界面,只能用控制台编程. 如上图,是游戏时画面截图. 其中,H表示蛇头,T表示蛇尾.#表示蛇的身体,@表示身体交叉重叠的地方. 你能说出现在的贪吃 ...