在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. 解决Duilib集成CEF浏览器在Win10无法向客户区拖拽文件

    在Duilib中集成CEF浏览器项目实际开发中,遇到一个问题. 一个需求从资源管理器(桌面)拖拽文件到客户端,窗口捕获WM_DROPFILES消息然后进行消息处理,但客户区是集成的CEF浏览器,浏览器 ...

  2. C#预处理器指令【转】

    本文转载自:http://www.cnblogs.com/miffylf/p/4005223.html C#有许多名为预处理器指令的命令.这些命令从来不会转化为可执行代码中的命令,但会影响编译过程的各 ...

  3. Linux命令中:rsync和cp之间的区别

    rsync:只拷贝那些更新的文件: cp -u:也可以实现类似效果: 两者都基本可以满足备份的需求: 只是一般情况下,用rsync做这类备份之类的事情,更多见: 在备份的操作中,拷贝,过期文件的删除是 ...

  4. 断开网络连接的dos命令

    https://zhidao.baidu.com/question/154994771.html 或者采用服务关闭开启模式,不过没有上面的好用net stop "network connec ...

  5. 使用Apache Kylin搭建企业级开源大数据分析平台

    转:http://www.thebigdata.cn/JieJueFangAn/30143.html 我先做一个简单介绍我叫史少锋,我曾经在IBM.eBay做过大数据.云架构的开发,现在是Kylige ...

  6. ns-3 NetAnim遇到了一个问题

    安装好了 NetAnim 之后,使用NS3原有例子 third.cc ,在 Simulator::run() 前面添加如下语句: AnimationInterface anim("third ...

  7. python从字符串解析方法名

    方法如下 import requests func_name = 'get' fn_obj = getattr(requests,func_name) fn_obj('http://www.baidu ...

  8. UVa 10118 免费糖果(记忆化搜索+哈希)

    https://vjudge.net/problem/UVA-10118 题意: 桌上有4堆糖果,每堆有N颗.佳佳有一个最多可以装5颗糖的小篮子.他每次选择一堆糖果,把最顶上的一颗拿到篮子里.如果篮子 ...

  9. go 变量声明

    第一种,指定变量类型,声明后若不赋值,使用默认值. var v_name v_type v_name = value 第二种,根据值自行判定变量类型. var v_name = value 第三种,省 ...

  10. js插件---Bootstrap 树控件

    js插件---Bootstrap 树控件 一.总结 一句话总结:可以直接用gojs,或者搜索js,jquery的树控件,或者bootstrap树控件,一大堆 gojs 二.JS组件系列——Bootst ...