创建组件之前,首先学习一个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. [Micropython]TPYBoardV102 DIY智能温控小风扇

    1.实验目的 1. 学习在PC机系统中扩展简单I/O 接口的方法. 2. 进一步学习编制数据输出程序的设计方法. 3. 学习DS18B20的接线方法,并利用DS18B20检测当前温度. 4.学习三极管 ...

  2. ML.NET 示例:推荐之矩阵分解

    写在前面 准备近期将微软的machinelearning-samples翻译成中文,水平有限,如有错漏,请大家多多指正. 如果有朋友对此感兴趣,可以加入我:https://github.com/fei ...

  3. R实战 第十二篇:随机数

    由R生成的随机数实际上伪随机数,也就是说,随机数是由某种算法而不是真正的随机过程产生的,随机数生成器需要一个初始值来生成数字,该初始值叫做种子.通过把种子设置为特定的值,可以保证每次运行同一段代码时都 ...

  4. 3.sparkSQL整合Hive

    spark SQL经常需要访问Hive metastore,Spark SQL可以通过Hive metastore获取Hive表的元数据.从Spark 1.4.0开始,Spark SQL只需简单的配置 ...

  5. Python_每日习题-0008-九九乘法表

    题目: 输出9*9乘法口诀表. 程序分析:分行与分列的考虑,共9行9列,i控制行,j控制列. for i in range(1, 10): for j in range(1, i+1): print( ...

  6. H5 13-子元素选择器

    13-子元素选择器 p{ color: red; } */ /* #identity>p{ color: blue; } */ div>ul>li>p{ color: purp ...

  7. UVA - 12716 - 异或序列

    求满足GCD(a,b) = a XOR b; 其中1<=b <=a<=n. 首先做这道题需要知道几个定理: 异或:a XOR b = c 那么 a XOR c = b; 那么我们令G ...

  8. c++入门之const初步理解

    关于const,首先建立这样的一个认识:const并不是定义了一个常量,而是定义了在某种环境下只读的变量.下面我们来区分一些东西: ; const int*p = &num; *p = ; i ...

  9. Django 中的Form、ModelForm

    一.ModelForm 源码 class ModelForm(BaseModelForm, metaclass=ModelFormMetaclass): pass def modelform_fact ...

  10. linux 下mysql服务的管理

    一.mysql服务的管理 1.1 mysql启动与关闭 linux下启动mysql: /etc/init.d/mysqld start 关闭进程: ps -ef | grep mysql 找到进程号 ...