在React中创建一个组件非常简单(React组件有2种,一个非状态组件,一个有状态组件)

首先我们来看看ES6里面如何写构造函数

 class App{

     constructor(){

   } 

    event(){
console.log("event是类App的方法")
}
onChange(){
console.log("onChange是类App的方法")
} } 在这个构造函数中App称为类 class Module extends App{
constructor() {
super() }
} Module继承父类App的所有方法跟属性
在子类的构造函数中,只有调用super之后,才可以使用this关键字,否则会报错

React组件写法

class App1 extends Component{
constructor(){
super()
this.state = { }
this.Method = this.Method.bind(this)
} Method(){
console.log("我是一个方法,我被的点击时候调用")
} render(){
return(
//所有的html都写在return里面
<div onClick = {this.Method}>我们创建的组件</div>  ) } }

export default App1;

React教程-组件的更多相关文章

  1. react教程 — 组件

    一.state使用: 1.什么时候不能 设置state(或没有必要设置): a.constructor. 2.默认的 state 值,一定要在初始化设置.因为,render 比 setState 早. ...

  2. react教程 — 组件的生命周期 和 执行顺序

    一.组件执行的生命周期:                  参考  https://www.cnblogs.com/soyxiaobi/p/9559117.html  或  https://www.c ...

  3. React的组件间通信

    一.React的单向数据流 React是单向数据流,数据主要从父节点传递到子节点(通过props).如果顶层(父级)的某个props改变了,React会重渲染所有的子节点.这通常被称为“自顶向下”或“ ...

  4. 学习react教程

    网址收藏: React官网,React的Github,React的中文文档 1.react是什么? React起源于Facebook的内部项目,因为该公司对市场上所有的Javascript MVC框架 ...

  5. 【react表格组件】material-table 基本用法 & 组件override

    教程: https://mbrn.github.io/material-table/#/ https://material-ui.com/api/table/ github: https://gith ...

  6. React入门介绍(2)- React Component-React组件

    React Component-React组件 允许用户自由封装组件是React非常突出的特性,用户可将自己创建的组件像普通的HTML标签一样插入页面,React.CreateClass方法就是用来创 ...

  7. 看完阮一峰的React教程后, 我写了一个TodoList

    看完阮一峰的React教程后,就自己做了这个TodoList,自己慢慢琢磨效率差了点但是作为入门小练习还是不错的. 以下是效果图:我的源码:todolistUI:bootstrap 4 一.组件化 我 ...

  8. react教程 — 性能优化

    参考:https://segmentfault.com/a/1190000007811296?utm_medium=referral&utm_source=tuicool  或  https: ...

  9. (私人收藏)React教程手册

    React教程手册 https://pan.baidu.com/s/1ka2PJ54HgqJ8lC6XgbvdLg pedx React 教程 含有3个附件,如下: react.js react-do ...

随机推荐

  1. springmvc-自定义消息转换器

    最近的项目没有用到这个,先把自己自学跑通的例子先帖出来,供自己以后参考吧! 如有不对地方望指出! 一.自定义类实现AbstractHttpMessageConverter package com.dz ...

  2. 【基础知识】ActiveMQ基本原理

    “来,根据你的了解说下 ActiveMQ 是什么.” “这个简单,ActiveMQ 是一个 MOM,具体来说是一个实现了 JMS 规范的系统间远程通信的消息代理.它……” “等等,先解释下什么是 MO ...

  3. 【第二十六章】 hystrix-dashboard + turbine

    一.使用turbine的意义 引入多个hystrix stream: 1.使用hystrix-dashboard的可以添加多个stream的功能 图中添加的两个stream会在真正monitor的时候 ...

  4. [echats] - EChats图表的使用

    从上图可以看到,信息是能被抽象化为图形展示的,也就是基本的图表,曲线(想想股票那种曲线,普及一下那个叫K线图,想起当初去北京面试炒股公司的时候了...),柱状图等. 而apache开源的echats正 ...

  5. .Net Core集成Office Web Apps(二)

    想要使用OWA需要一台单独的服务器来部署,这对很多人造成困难.而写该文的目的是为了分享有个OWA的集成步骤,它不仅适用于.Net开发环境,其它语言也是一样的,只要实现了需要的服务接口.并且该文不局限与 ...

  6. POJ 2506 Tiling(递推+大整数加法)

    http://poj.org/problem?id=2506 题意: 思路:递推.a[i]=a[i-1]+2*a[i-2]. 计算的时候是大整数加法.错了好久,忘记考虑1了...晕倒. #includ ...

  7. 为什么我的电脑win系统没有便笺功能?为什么我在开始菜单里找不到便笺功能?

    有些网友表示,为什么我的电脑没有便笺功能?为什么我在开始菜单里找不到便笺功能? 从问题可以基本判断出来,这些网友使用的Win7版本有可能是买笔记本或者台式电脑时预装的Win7家庭普通版或者Win7精简 ...

  8. # WinForm关闭窗体确认

    private void Lba_IE_Form_FormClosing(object sender, FormClosingEventArgs e) { if (MessageBox.Show(&q ...

  9. 《WAP团队》项目系统设计改进与详细设计

    任务1: 一.分析<基于家教管理系统项目需求规格说明书>初稿的不足,特别是文档需求描述建模不完整的内容. 通过软件工程更深入的学习发现我们的需求分析建模明显不足,缺少最重要的类图. 二.团 ...

  10. Codeforces 525A - Vitaliy and Pie

    525A - Vitaliy and Pie 思路:贪心+hashing. 代码: #include<bits/stdc++.h> using namespace std; string ...