创建组件之前,首先学习一个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. 洛谷题解 P1031 【均分纸牌】

    这道题很简单 原理是从左到右一个一个排,把差值m加起来加到后面一堆牌里 具体ac代码如下: #include<cstdio> #include<iostream> #inclu ...

  2. 输出1-100 , 奇数偶数分别添加标识(for循环语句嵌套if-else语句)

    package com.summer.cn; /** * @author Summer * 输出1-100 , 奇数偶数分别添加标识 */ public class Test041518 { publ ...

  3. 浅析mysql中exists 与 in 的使用

    一.exists的使用    exists对外表用loop逐条查询,每次查询都会查看exists的条件语句,当exists里的条件语句能够返回记录行时(无论记录行是的多少,只要能返回),条件就为真,返 ...

  4. Java NIO3:缓冲区Buffer

    在上一篇中,我们介绍了NIO中的两个核心对象:缓冲区和通道,在谈到缓冲区时,我们说缓冲区对象本质上是一个数组,但它其实是一个特殊的数组,缓冲区对象内置了一些机制,能够跟踪和记录缓冲区的状态变化情况,如 ...

  5. (通用版)salesforce中soql及sosl的伪‘Like’模糊检索

    salesforce里有soql.sosl两种查询语法,soql针对模糊搜索也有‘like’关键字,然而只能针对其自带字段如:Name.Id:对于自定义添加的字段如:Message__c.Note__ ...

  6. 跨语言调用Hangfire定时作业服务

    跨语言调用Hangfire定时作业服务 背景 Hangfire允许您以非常简单但可靠的方式执行后台定时任务的工作.内置对任务的可视化操作.非常方便. 但令人遗憾的是普遍都是业务代码和hagnfire服 ...

  7. OSGI基础环境搭建

    1.安装jdk,步骤自行搜索 2.下载eclipse,用luna版本,下载地址: https://pan.baidu.com/s/1gdfmW5znU4fltsLCAo8tkg 提取码: nrg7 3 ...

  8. Minesweeper

    你玩过扫雷吗?这个可爱的小游戏带有一个我们记不住名字的操作系统.游戏的目标是找到所有地雷在M x N场中的位置.游戏在一个正方形中显示一个数字,它告诉你在这个正方形附近有 多少个地雷.每个方块最多有八 ...

  9. hdu5943素数间隙与二分匹配

    题意: 给出n和s,匹配(s+1,s+2,s+3......s+n)和(1,2,3,4,5........n)让(s+x)%x==0,判断是否有解 思路: 先用程序跑一边,发现1到1e9得素数间隙小于 ...

  10. Karen and Coffee CodeForces - 816B (差分数组+预处理前缀和)

    To stay woke and attentive during classes, Karen needs some coffee! Karen, a coffee aficionado, want ...