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 相关文章推荐
$.ajax json数据传递方法
Nov 19 Javascript
自己写了一个展开和收起的多更能型的js效果
Mar 05 Javascript
JavaScript实现找出字符串中第一个不重复的字符
Sep 03 Javascript
javascript引擎长时间独占线程造成卡顿的解决方案
Dec 03 Javascript
AngularJS入门(用ng-repeat指令实现循环输出
May 05 Javascript
总结Javascript中数组各种去重的方法
Oct 04 Javascript
EasyUI 中combotree 默认不能选择父节点的实现方法
Nov 07 Javascript
基于js中style.width与offsetWidth的区别(详解)
Nov 12 Javascript
node puppeteer(headless chrome)实现网站登录
May 09 Javascript
详解小程序之简单登录注册表单验证
May 13 Javascript
微信小程序实现点击图片放大预览
Oct 21 Javascript
vue-model实现简易计算器
Aug 17 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
支持中文、字母、数字的PHP验证码
2015/05/04 PHP
通过修改Laravel Auth使用salt和password进行认证用户详解
2017/08/17 PHP
thinkphp5.1 框架导入/导出excel文件操作示例
2020/05/25 PHP
使用prototype.js 的时候应该特别注意的几个问题.
2007/04/12 Javascript
JS window.opener返回父页面的应用
2009/10/24 Javascript
Javascript结合css实现网页换肤功能
2009/11/02 Javascript
使用jQuery模板来展现json数据的代码
2010/10/22 Javascript
js中访问html中iframe的文档对象的代码[IE6,IE7,IE8,FF]
2011/01/08 Javascript
JavaScript判断是否为数字的4种方法及效率比较
2015/04/01 Javascript
微信公众号支付H5调用支付解析
2016/11/04 Javascript
jQuery树控件zTree使用方法详解(一)
2017/02/28 Javascript
JS实现的二叉树算法完整实例
2017/04/06 Javascript
angularJS 发起$http.post和$http.get请求的实现方法
2017/05/18 Javascript
利用require.js与angular搭建spa应用的方法实例
2017/07/19 Javascript
JS实现点击循环切换显示内容的方法
2017/10/19 Javascript
vue+node+webpack环境搭建教程
2017/11/05 Javascript
jQuery实现滚动到底部时自动加载更多的方法示例
2018/02/18 jQuery
vuecli项目构建SSR服务端渲染的实现
2020/10/30 Javascript
python实现去除下载电影和电视剧文件名中的多余字符的方法
2014/09/23 Python
使用Python中的tkinter模块作图的方法
2017/02/07 Python
python模拟事件触发机制详解
2018/01/19 Python
详解python 注释、变量、类型
2018/08/10 Python
selenium+python 对输入框的输入处理方法
2018/10/11 Python
python 统计一个列表当中的每一个元素出现了多少次的方法
2018/11/14 Python
Python 虚拟空间的使用代码详解
2019/06/10 Python
Python交互式图形编程的实现
2019/07/25 Python
python实现的Iou与Giou代码
2020/01/18 Python
Pandas的数据过滤实现
2021/01/15 Python
canvas实现扭蛋机动画效果的示例代码
2018/10/17 HTML / CSS
澳大利亚最超值的自行车之家:Reid Cycles
2019/03/24 全球购物
个人遵守党的政治纪律情况对照检查材料思想汇报
2014/09/25 职场文书
七一建党节慰问信
2015/02/14 职场文书
保送生自荐信
2015/03/06 职场文书
利用Python网络爬虫爬取各大音乐评论的代码
2021/04/13 Python
mysql 带多个条件的查询方式
2021/06/05 MySQL
MySQL创建管理HASH分区
2022/04/13 MySQL