创建组件之前,首先学习一个ES6的写法,叫做展开运算符。

比如我这里有两个数组。如何将第二个数组o2中的所有属性导入到数组o1中呢?一个个输太麻烦,所以就用到了展开运算符。

var o2={
age:18,
gender:female
}
var o1={
name:'Alice'
}
var o2={
age:18,
gender:female
}
var o1={
name:'Alice',
...o2
}

第二种方法是利用class类进行创建组件,class本身也是ES6的写法。而且,每一个类中都有一个构造器constructor,你如果不设定的话,他自己就会默认一个看不见的空构造器。构造器作用,每new该类的时候,会先执行构造器中的所有代码。里面的属性叫做实例属性。

class Animal{
constructor(name,age){
this.name=name,
this,age=age}
}const a1=new Animal('bark',3);console.log(a1);

行内样式要用两个花括号包裹,不要用html标签的写法。

react用class关键字来创建组件的更多相关文章

  1. react中创建组件

    第1种 - 创建组件的方式 > 使用构造函数来创建组件,如果要接收外界传递的数据,需要在 构造函数的参数列表中使用`props`来接收:> 必须要向外return一个合法的JSX创建的虚拟 ...

  2. react创建组件的几种方式及其区别

    react创建组件有如下几种方式 ①.函数式定义的无状态组件 ②.es5原生方式React.createClass定义的组件   ③.es6形式的extends React.Component定义的组 ...

  3. React创建组件的三种方式及其区别

    内容转载于http://www.cnblogs.com/wonyun/p/5930333.html React推出后,出于不同的原因先后出现三种定义react组件的方式,殊途同归; 具体的三种方式: ...

  4. react 创建组件 (一)createClass

    如果你还没有使用ES6语法,那么定义组件,只能使用React.createClass这个helper来创建组件,下面是一段示例: var React = require("react&quo ...

  5. React中创建组件的3种方式

    目前作者所知道的创建react组件的方式有三种: 函数式定义(无状态组件) function MyComponent(props){ return( <h1>mycomponent< ...

  6. 301-React Ext-React创建组件的三种方式及其区别

    一.概述 React推出后,出于不同的原因先后出现三种定义react组件的方式,殊途同归:具体的三种方式: 函数式定义的无状态组件 es5原生方式React.createClass定义的组件 es6形 ...

  7. 使用 function 构造函数创建组件和使用 class 关键字创建组件

    使用 function 构造函数创建组件: 如果想要把组件放到页面中,可以把构造函数的名称,当作 组件的名称,以 HTML标签形式引入页面中, 因为在React中,构造函数就是一个最基本的组件. 注意 ...

  8. 理解React中es6方法创建组件的this

    首发于:https://mingjiezhang.github.io/(转载请说明此出处). 在JavaScript中,this对象是运行时基于函数的执行环境(也就是上下文)绑定的. 从react中的 ...

  9. [react 基础篇]——React.createClass()方法同时创建多个组件类

    react 组件 React 允许将代码封装成组件(component),然后像插入普通 HTML 标签一样,在网页中插入这个组件.React.createClass 方法就用于生成一个组件类 一个组 ...

随机推荐

  1. Python排序算法——快速排序

    有趣的事,Python永远不会缺席! 如需转发,请注明出处:小婷儿的python https://www.cnblogs.com/xxtalhr/p/10768593.html 排序算法(Sortin ...

  2. face recognition[Euclidean-distance-based loss][Center Face]

    本文来自<A Discriminative Feature Learning Approach for Deep Face Recognition>,时间线为2016年.采用的loss是C ...

  3. 1、话说linux内核

    1.内核和发行版的区别 到底什么是操作系统 linux.windows.android.ucos就是操作系统 操作系统本质上是一个程序,由很多个源文件构成,需要编译连接成操作系统程序(vmlinz.z ...

  4. 内联函数:static inline 和 extern inline 的含义

    引入内联函数的目的是为了解决程序中函数调用的效率问题. 函数是一种更高级的抽象.它的引入使得编程者只关心函数的功能和使用方法,而不必关心函数功能的具体实现:函数的引入可以减少程序的目标代码,实现程序代 ...

  5. webstrom 使用sass的环境配置说明

    sass(https://www.sass.hk)基于Ruby语言开发而成,因此安装sass前需要安装Ruby.(注:mac下自带Ruby无需在安装Ruby!) 一.安装ruby 注意勾选第二个选项 ...

  6. DSL 系列(1) - 扩展点的论述与实现

    前言 DSL 全称为 domain-specific language(领域特定语言),本系列应当会很长,其中包含些许不成熟的想法,欢迎私信指正. 1. DSL 简述 我理解的 DSL 的主要职能是 ...

  7. sql面试学到新内容

    1.事物的保存点 MYSQL可以让我们对事务进行部分回滚,就是在事务里调用SAVEPOINT语句来设置一些命名标记.如果想要回滚到那个标记点位置,需要使用ROLLBACK语句来指定哪个保存点. mys ...

  8. 关于oracle设置主键自增的问题

    关于orcale设置主键自增的问题 关于主键Oracle中并没有提供一个直接的语句设置,对于这个oralce一般都是用序列和触发器来实现 一下又两种方法来实现 一 ,不使用触发器 创建序列: crea ...

  9. vue 开发依赖安装

    安装element-ui yarn add element-ui --save 使用element-ui main.js import Vue from 'vue'; import ElementUI ...

  10. 微信开发 提示 Redirect_uri(错误10003)

    情景: 搭建完成一个网站,使用微信打开链接地址,结果报错1003 完整的错误信息: 出现这种情况一般有两种原因: 1.没有配置网页授权  我们可以根据微信的开发者文档http://mp.weixin. ...