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 相关文章推荐
jquery validation插件表单验证的一个例子
Mar 03 Javascript
JavaScript高级程序设计(第3版)学习笔记11 内建js对象
Oct 11 Javascript
Js(JavaScript)中,弹出是或否的选择框示例(confirm用法的实例分析)
Jul 09 Javascript
基于jquery实现一张图片点击鼠标放大再点缩小
Sep 29 Javascript
javascript特殊用法示例介绍
Nov 29 Javascript
删除javascript所创建子节点的方法
May 21 Javascript
js仿微博实现统计字符和本地存储功能
Dec 22 Javascript
Node.js编写爬虫的基本思路及抓取百度图片的实例分享
Mar 12 Javascript
微信小程序组件 marquee实例详解
Jun 23 Javascript
微信小程序引入模块中wxml、wxss、js的方法示例
Aug 09 Javascript
详解element-ui中表单验证的三种方式
Sep 18 Javascript
angular异步验证防抖踩坑实录
Dec 01 Javascript
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
解析Extjs与php数据交互(增删查改)
2013/06/25 PHP
深入file_get_contents函数抓取内容失败的原因分析
2013/06/25 PHP
PHP SPL标准库之数据结构栈(SplStack)介绍
2015/05/12 PHP
Yii2实现同时搜索多个字段的方法
2016/08/10 PHP
img标签中onerror用法
2009/08/13 Javascript
jQuery.getScript加载同域JS的代码
2012/02/13 Javascript
jquery如何判断表格同一列不同行input数据是否重复
2014/05/14 Javascript
JQuery插件iScroll实现下拉刷新,滚动翻页特效
2014/06/22 Javascript
JS动态修改iframe高度和宽度的方法
2015/04/01 Javascript
JQuery选中checkbox方法代码实例(全选、反选、全不选)
2015/04/27 Javascript
浅谈JavaScript的Polymer框架中的事件绑定
2015/07/29 Javascript
Google 地图获取API Key详细教程
2016/08/06 Javascript
js 性能优化之算法和流程控制
2017/02/15 Javascript
微信小程序中多个页面传参通信的学习与实践
2017/05/05 Javascript
JS控制鼠标拒绝点击某一按钮的实例
2017/12/29 Javascript
node.js自动上传ftp的脚本分享
2018/06/16 Javascript
在小程序开发中使用npm的方法
2018/10/17 Javascript
layui2.0使用table+laypage实现真分页
2019/07/27 Javascript
微信小程序多列表渲染数据开关互不影响的实现
2020/06/05 Javascript
在python中的socket模块使用代理实例
2014/05/29 Python
Python实现对比不同字体中的同一字符的显示效果
2015/04/23 Python
正确理解Python中if __name__ == '__main__'
2019/01/24 Python
简单了解django索引的相关知识
2019/07/17 Python
Python生命游戏实现原理及过程解析(附源代码)
2019/08/01 Python
Python爬取腾讯视频评论的思路详解
2019/12/19 Python
Python virtualenv虚拟环境实现过程解析
2020/04/18 Python
Python如何生成xml文件
2020/06/04 Python
Python faker生成器生成虚拟数据代码实例
2020/07/20 Python
python使用ctypes库调用DLL动态链接库
2020/10/22 Python
用JAVA实现一种排序,JAVA类实现序列化的方法(二种)
2014/04/23 面试题
大学校庆邀请函
2014/01/11 职场文书
幼儿园数学教学反思
2014/02/02 职场文书
英语教学随笔感言
2014/02/20 职场文书
护士实习求职信
2014/06/22 职场文书
银行业务授权委托书
2014/10/10 职场文书
二年级语文上册复习计划
2015/01/19 职场文书