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. ROS学习文章

    ros机器人到底有没有必要学习?

  2. SQL Server中如何让SQL语句对字符串大小写敏感

    在SQL Server中默认对大小写是不敏感的,例如fname='peter'和fname='PETER'结果是一样的.但有时候用户会要求区分大小写,如验证密码等.这种情况下的处理办法就是在字段后加上 ...

  3. 使用 Vuex + Vue.js 构建单页应用【新篇】

    使用 Vuex + Vue.js 构建单页应用[新篇] 在去年的七月六号的时候,发布了一篇 使用 Vuex + Vue.js 构建单页应用 的文章,文章主要是介绍 vuex 的基本使用方法,发现对大部 ...

  4. python-排列组合序列

    [题目描述]用户输入整数n(1<=n<=26)和整数m(m<=n),然后输入n个不同的字母,请编写程序输出在这n个字母中选择m个字母的所有排列序列和组合序列. [练习要求]请给出源代 ...

  5. JS判断数组中的对象的每一个值不能为空

    方法一:使用every()函数,此函数不怎么常用,想要了解更多请自查 //表格 evaluateData为表格的数据 <el-table id="out-table3" :d ...

  6. spring原始注解开发-01

    我们使用xml-Bean标签的配置方式和注解做对比理解 1.创建UserDao接口以及UserDao的实现类UserDaoImpl(接口代码省略) public class UserDaoImpl i ...

  7. vue 项目build后部署上去页面空白

    默认情况下vue-cli 会认为项目是部署在域名的根路径上. 但是当项目被部署到了一个子路径上,就要自己选定子路径. 比如项目被部署在了 https://www.ujapp.com/my-app, 则 ...

  8. 面试突击39:synchronized底层是如何实现的?

    想了解 synchronized 是如何运行的?就要先搞清楚 synchronized 是如何实现? synchronized 同步锁是通过 JVM 内置的 Monitor 监视器实现的,而监视器又是 ...

  9. 解构华为云HE2E项目中的容器技术应用

    摘要:本文从容器技术应用的角度解构了HE2E项目的代码仓库配置.镜像构建.及docker-compose的部署方式.希望通过本篇文章分享可以使更多的开发者了解容器技术和华为云. 本文分享自华为云社区& ...

  10. python基础练习题(题目 打印出所有的"水仙花数",所谓"水仙花数"是指一个三位数,其各位数字立方和等于该数本身)

    day8 --------------------------------------------------------------- 实例013:所有水仙花数 题目 打印出所有的"水仙花 ...