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和s3captche实现一个水果名字的验证
Aug 14 Javascript
jquery中的mouseleave和mouseout的区别 模仿下拉框效果
Feb 07 Javascript
关于javascript中的typeof和instanceof介绍
Dec 04 Javascript
深入分析JQuery和JavaScript的异同
Oct 23 Javascript
不得不分享的JavaScript常用方法函数集(下)
Dec 25 Javascript
jQuery 获取跨域XML(RSS)数据的相关总结分析
May 18 Javascript
JS实现倒序输出的几种常用方法示例
Apr 13 Javascript
vue+element导航栏高亮显示的解决方式
Nov 12 Javascript
js实现时钟定时器
Mar 26 Javascript
Vue性能优化的方法
Jul 30 Javascript
微信小程序以7天为周期连续签到7天功能效果的示例代码
Aug 20 Javascript
webpack介绍使用配置教程详解webpack介绍和使用
Jun 25 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
为查询结果建立向后/向前按钮
2006/10/09 PHP
PHP编程之高级技巧——利用Mysql函数
2006/10/09 PHP
PHP下利用shell后台运行PHP脚本,并获取该脚本的Process ID的代码
2011/09/19 PHP
PHP写的获取各搜索蜘蛛爬行记录代码
2012/08/21 PHP
PHP新特性详解之命名空间、性状与生成器
2017/07/18 PHP
jQuery设置div一直在页面顶部显示的方法
2013/10/24 Javascript
jQuery使用height()获取高度需要注意的地方
2014/12/13 Javascript
简单学习JavaScript中的for语句循环结构
2015/11/10 Javascript
js实现n秒倒计时后才可以点击的效果
2015/12/20 Javascript
NodeJs下的测试框架Mocha的简单介绍
2017/02/22 NodeJs
JS实现上传图片实时预览功能
2017/05/22 Javascript
Vue.js实现网格列表布局转换方法
2017/08/25 Javascript
基于Vue生产环境部署详解
2017/09/15 Javascript
react配合antd组件实现的管理系统示例代码
2018/04/24 Javascript
百度小程序之间的页面通信过程详解
2019/07/18 Javascript
5分钟快速看懂ES6中的反射与代理
2019/12/19 Javascript
微信小程序如何通过用户授权获取手机号(getPhoneNumber)
2020/01/21 Javascript
vue跳转方式(打开新页面)及传参操作示例
2020/01/26 Javascript
python正则匹配抓取豆瓣电影链接和评论代码分享
2013/12/27 Python
python中MySQLdb模块用法实例
2014/11/10 Python
python函数局部变量用法实例分析
2015/08/04 Python
Python统计python文件中代码,注释及空白对应的行数示例【测试可用】
2018/07/25 Python
Flask核心机制之上下文源码剖析
2018/12/25 Python
使用Filter过滤python中的日志输出的实现方法
2019/07/17 Python
Python编程快速上手——Excel到CSV的转换程序案例分析
2020/02/28 Python
keras导入weights方式
2020/06/12 Python
HTML5实现的震撼3D焦点图动画的示例代码
2019/09/26 HTML / CSS
html5 video全屏播放/自动播放的实现示例
2020/08/06 HTML / CSS
中学学校门卫岗位职责
2014/08/15 职场文书
公司授权委托书格式范文
2014/10/02 职场文书
2014年乡镇安全生产工作总结
2014/12/02 职场文书
2014流动人口计划生育工作总结
2014/12/20 职场文书
2015年社区综治工作总结
2015/04/21 职场文书
2016党风廉政建设心得体会范文
2016/01/25 职场文书
JS Canvas接口和动画效果大全
2021/04/29 Javascript
MySQL之select、distinct、limit的使用
2021/11/11 MySQL