在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. tf.random_uniform的使用

    tf.random_uniform((4, 4), minval=low,maxval=high,dtype=tf.float32)))返回4*4的矩阵,产生于low和high之间,产生的值是均匀分布 ...

  2. HTTP If-Modified-Since引发的浏览器缓存汇总

    在看Spring中HttpServlet的Service方法时,对于GET请求,代码逻辑如下: if (method.equals(METHOD_GET)) { long lastModified = ...

  3. MOOC_Java进阶_翁恺讲_第三周题

    package mooc_java进阶_d3周题; /** * 没有使用HashMap */ import java.util.ArrayList; import java.util.Scanner; ...

  4. hadoop项目实战--ETL--(三)实现mysql表到HIVE表的全量导入与增量导入

    一 在HIVE中创建ETL数据库 ->create database etl; 二 在工程目录下新建MysqlToHive.py 和conf文件夹 在conf文件夹下新建如下文件,最后的工程目录 ...

  5. 01_Flume基本架构及原理

    Flume消息收集系统,在整个系统架构中的位置 Flume概况1) Apache软件基金会的顶级项目2)存在两个大的版本:Flume 0.9.x(Flume-OG,original generatio ...

  6. UVa 1603 破坏正方形

    https://vjudge.net/problem/UVA-1603 题意:有一个火柴棍组成的正方形网格,计算至少要拿走多少根火柴才能破坏所有正方形. 思路:从边长为1的正方形开始遍历,将正方形的边 ...

  7. 翻译header

    !/usr/bin/env pyhton --coding:utf-8-- import urllib.request import urllib.parse import os,sys import ...

  8. linux——压缩解压命令学习简单笔记

    一: 命令名称:gzip 命令英文原意:GNU zip 命令所在路径:/bin/gzip 执行权限:所有用户 语法:gzip 选项 [文件] 功能描述:压缩文件 压缩后文件格式:.gz 1:只能压缩文 ...

  9. Codeforces Beta Round #16 div 2 C.Monitor最大公约数

    C. Monitor time limit per test 0.5 second memory limit per test 64 megabytes input standard input ou ...

  10. Java Selenium 笔记

    目录一.基本语句 1.循环控制(break,continue) 3.字符的替换(replace,repalceFirst,replaceAll,regex) 4.字符串的连接("+" ...