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 相关文章推荐
你的编程语言可以这样做吗?
Sep 07 Javascript
JavaScript 原型链学习总结
Oct 29 Javascript
jquery的ajax请求全面了解
Mar 20 Javascript
jquery实现带缩略图的全屏图片画廊效果实例
Jun 25 Javascript
javascript实现简单的on事件绑定
Aug 23 Javascript
JS+canvas实现的五子棋游戏【人机大战版】
Jul 19 Javascript
AngularJs+Bootstrap实现漂亮的计算器
Aug 10 Javascript
VueJs组件之父子通讯的方式
May 06 Javascript
ES6顶层对象、global对象实例分析
Jun 14 Javascript
Vue-cli3生成的Vue项目加载Mxgraph方法示例
May 31 Javascript
前端学习——JavaScript原生实现购物车案例
Mar 31 Javascript
JS前端使用canvas实现物体的点选示例
Aug 05 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封装的连接Mysql类及用法分析
2015/12/10 PHP
PHP封装函数实现生成随机的字符串验证码
2017/01/24 PHP
JQuery扩展插件Validate 1 基本使用方法并打包下载
2011/09/05 Javascript
js当一个变量为函数时 应该注意的一点细节小结
2011/12/29 Javascript
Prototype框架详解
2015/11/25 Javascript
实例讲解避免javascript冲突的方法
2016/01/03 Javascript
详解javascript实现瀑布流绝对式布局
2016/01/29 Javascript
让图片跳跃起来  javascript图片轮播特效
2016/02/16 Javascript
web打印小结
2017/01/11 Javascript
微信小程序 下拉菜单简单实例
2017/04/13 Javascript
vue和webpack项目构建过程常用的npm命令详解
2018/06/15 Javascript
Vue.js 时间转换代码及时间戳转时间字符串
2018/10/16 Javascript
webpack4+react多页面架构的实现
2018/10/25 Javascript
jQuery实现简单全选框
2020/09/13 jQuery
JavaScript中跨域问题的深入理解
2021/03/04 Javascript
[56:58]VP vs Optic 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
使用PYTHON创建XML文档
2012/03/01 Python
跟老齐学Python之坑爹的字符编码
2014/09/28 Python
为Python程序添加图形化界面的教程
2015/04/29 Python
python杀死一个线程的方法
2015/09/06 Python
利用python求相邻数的方法示例
2017/08/18 Python
Python编程使用NLTK进行自然语言处理详解
2017/11/16 Python
Python实现按逗号分隔列表的方法
2018/10/23 Python
Python random模块制作简易的四位数验证码
2020/02/01 Python
python语言是免费还是收费的?
2020/06/15 Python
css3的@media属性实现页面响应式布局示例代码
2014/02/10 HTML / CSS
HTML5到底会有什么发展?HTML5的前景展望
2015/07/07 HTML / CSS
使用layui实现左侧菜单栏及动态操作tab项的方法
2020/11/10 HTML / CSS
DELPHI面试题研发笔试试卷
2015/11/08 面试题
业务部经理岗位职责
2014/01/04 职场文书
公司法定代表人授权委托书
2014/09/29 职场文书
销售开票员岗位职责
2015/04/15 职场文书
致青春观后感
2015/06/09 职场文书
生日宴会家属答谢词
2015/09/29 职场文书
优秀员工演讲稿
2019/06/21 职场文书
读《瓦尔登湖》有感:每个人都需要一个瓦尔登湖
2019/10/17 职场文书