ES6下React组件的写法示例代码


Posted in Javascript onMay 04, 2017

本文主要跟大家分享了ES6下React组件的写法示例,下面来一起看看详细的介绍:

一:定义React组件

class Hello extends React.Component {
 render() {
  return <h1>Hello, {this.props.value}</h1>;
 }
}

二:声明prop类型与默认prop

class Hello extends React.Component {
 // ...
}
Hello.propTypes = {
 value: React.PropTypes.string
};
Hello.defaultProps = {
 value: 'world'
};

三、设置初始state

class Hello extends React.Component {
 constructor(props) {
  super(props);
  this.state = {count: props.initialCount};
 }
 // ...
}

四、自动绑定

class SayHello extends React.Component {
 constructor(props) {
  super(props);
  this.state = {message: 'Hello!'};
  // 这行很重要
  this.handleClick = this.handleClick.bind(this);
 }
 handleClick() {
  alert(this.state.message);
 }
 render() {
  // Because `this.handleClick` is bound, we can use it as an event handler.
  return (
   <button onClick={this.handleClick}>
    Say hello
   </button>
  );
 }
}

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
js自定义事件代码说明
Jan 31 Javascript
jquery的ajaxSubmit()异步上传图片并保存表单数据演示代码
Jun 04 Javascript
jquery和js实现对div的隐藏和显示方法
Sep 26 Javascript
JS实现状态栏跑马灯文字效果代码
Oct 24 Javascript
跟我学习javascript的异步脚本加载
Nov 20 Javascript
JS实现刷新父页面不弹出提示框的方法
Jun 22 Javascript
bootstrap datepicker 与bootstrapValidator同时使用时选择日期后无法正常触发校验的解决思路
Sep 28 Javascript
bootstrap网格系统使用方法解析
Jan 13 Javascript
基于JavaScript实现轮播图原理及示例
Apr 10 Javascript
Angular.js中$resource高大上的数据交互详解
Jul 30 Javascript
js嵌套的数组扁平化:将多维数组变成一维数组以及push()与concat()区别的讲解
Jan 19 Javascript
jQuery实现简单弹幕制作
Dec 10 jQuery
JS触摸事件、手势事件详解
May 04 #Javascript
详解Angular 4.x Injector
May 04 #Javascript
详解Vue中使用v-for语句抛出错误的解决方案
May 04 #Javascript
详解Node.js串行化流程控制
May 04 #Javascript
纯原生js实现贪吃蛇游戏
Apr 16 #Javascript
js调用刷新界面的几种方式
May 03 #Javascript
JavaScript中双向数据绑定详解
May 03 #Javascript
You might like
php Mysql日期和时间函数集合
2007/11/16 PHP
PHP strtr() 函数使用说明
2008/11/21 PHP
一道求$b相对于$a的相对路径的php代码
2010/08/08 PHP
Apache2中实现多网站域名绑定的实现方法
2011/06/01 PHP
php图像处理函数大全(推荐收藏)
2013/07/11 PHP
PHP+Redis开发的书签案例实战详解
2019/07/09 PHP
jQuery使用手册之一
2007/03/24 Javascript
Javascript学习笔记5 类和对象
2010/01/11 Javascript
javascript attachEvent绑定多个事件执行顺序问题
2010/10/20 Javascript
createTextRange()的使用示例含文本框选中部分文字内容
2014/02/24 Javascript
深入理解javascript中的立即执行函数(function(){…})()
2014/06/12 Javascript
JavaScript-RegExp对象只能使用一次问题解决方法
2014/06/23 Javascript
bootstrap table 服务器端分页例子分享
2015/02/10 Javascript
jquery自定义插件结合baiduTemplate.js实现异步刷新(附源码)
2016/12/22 Javascript
Javascript 对cookie操作详解及实例
2016/12/29 Javascript
Bootstrap table 定制提示语的加载过程
2017/02/20 Javascript
Django使用多数据库的方法
2017/09/06 Javascript
vue.js template模板的使用(仿饿了么布局)
2018/08/13 Javascript
手把手教你如何使用nodejs编写cli命令行
2018/11/05 NodeJs
详解如何为你的angular app构建一个第三方库
2018/12/07 Javascript
浅谈Vue 性能优化之深挖数组
2018/12/11 Javascript
python在windows下创建隐藏窗口子进程的方法
2015/06/04 Python
浅谈Python类里的__init__方法函数,Python类的构造函数
2016/12/10 Python
Python入门_浅谈逻辑判断与运算符
2017/05/16 Python
Python工厂函数用法实例分析
2018/05/14 Python
Django实现支付宝付款和微信支付的示例代码
2018/07/25 Python
Python设计模式之模板方法模式实例详解
2019/01/17 Python
Python面向对象程序设计构造函数和析构函数用法分析
2019/04/12 Python
Python实现计算文件MD5和SHA1的方法示例
2019/06/11 Python
python适合人工智能的理由和优势
2019/06/28 Python
使用virtualenv创建Python环境及PyQT5环境配置的方法
2019/09/10 Python
使用Python制作一个打字训练小工具
2019/10/01 Python
个人委托书格式
2014/04/04 职场文书
《三个小伙伴》教学反思
2014/04/11 职场文书
求职自我评价参考范文
2019/05/16 职场文书
分享五个Node.js开发的优秀实践 
2022/04/07 NodeJs