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. 无人驾驶—高精地图和V2X

    高精地图将厘米级的静态信息传传递给无人车V2X将路况上的动态信息传递给无人车 高精地图的作用 高精地图与传统地图的对比 高精地图与定位的关系 上图左侧是感知到的区域,右侧是高精地图,之后进行拼接获得车 ...

  2. Numpy中重要的广播概念

    Numpy中重要的广播概念 广播:简单理解为用于不同大小数组的二元通用函数(加.减.乘等)的一组规则 广播的规则: 如果两个数组的维度数dim不相同,那么小维度数组的形状将会在左边补1 如果shape ...

  3. pycharm2019版本可用破解

    1.下载破解文件 点击链接https://pan.baidu.com/s/1FbpXC4-rACrLMfeuVzJGPQ   提取码:hyed 下载补丁文件jetbrains-agent.jar并将它 ...

  4. html5中常被忘记的标签,属性

    placeholder placeholder是input中的属性,就是默认输入的text,当用户输入时,text会被清空. 用法 <input type ="text" p ...

  5. java的原子类到底是啥?ABA,CAS又是些什么?

    1)解决并发不是用锁就能解决吗,那SDK干嘛还要搞个原子类出来? 锁虽然能解决,但是加锁解锁始终还是对性能是有影响的,并且使用不当可能会造成死锁之类的问题. 2)原子类是怎样使用的,比如说我要实现一个 ...

  6. VISIO下载+安装+第一个数据流图

    一. 下载地址 Visio2021 (64bit).zip_免费高速下载|百度网盘-分享无限制 (baidu.com) 码3333 二. 安装步骤 Visio2021安装教程 (qq.com) 三. ...

  7. 微信小程序时间戳转为日期格式

    通常后台传递过来的都是时间戳,但是前台展示不能展示时间戳.就需要转化了. 功能说明: 微信小程序里,时间戳转化为日期格式,支持自定义. 拷贝至项目utils/utils.js中,并注意在js中声明下: ...

  8. vux+vue-cli3.0坑

    最近开发了项目使用了vue-cli3.0+vux搭建的项目,现在总结遇到的问题: 环境:github vux有关于vue-cli3.0以及vux已经搭建好的脚手架vux-cli3链接 一:如下报错 解 ...

  9. ES 架构及基础 - 1

    Elasticsearch 是一款分布式,RESTful 风格的搜索和数据分析引擎,可以从海量的数据中高效的找到相关信息.如 wiki 用 ES 进行全文检索及其高亮,Github 用其检索代码,电商 ...

  10. Python入门-面向对象三大特性-多态

    Pyhon不支持多态并且也用不到多态,多态的概念是应用于Java和C#这一类强类型语言中,而Python崇尚"鸭子类型".