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

本文主要跟大家分享了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>
  );
 }
}

总结

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

赞 (0)

相关推荐

  • React中ES5与ES6写法的区别总结

    前言 相信很多React的初学者都被ES6的问题迷惑:各路大神都建议我们直接学习ES6的语法(class Foo extends React.Component),然而网上搜到的很多教程和例子都是ES5版本的,所以很多人在学习的时候连照猫画虎都不知道怎么做.所以这篇文章就整理了一些ES5和ES6的写法对照表,希望大家以后读到ES5的代码,也能通过对照,在ES6下实现相同的功能.下面话不多说了,来看看详细的介绍吧. 模块 引用 在ES5里,如果使用CommonJS标准,引入React包基本通过re

  • react开发中如何使用require.ensure加载es6风格的组件

    其实用的babel,在浏览器端就应该可以加载,之前少了个default: require.ensure([],(require) => { let A = require('./a.js').default; }) 以下方式也可以,但是比较low,可以作废了: 1.问题提出:想通过require.ensure加载es6风格的模块? 2.出现问题:import方式本身就是静态设计方式.如果require进来的是commonjs模块或者amd则没问题,但项目只想es6一个书写风格,行吗? 遗憾的是:

  • 深入理解React中es6创建组件this的方法

    首发于:https://mingjiezhang.github.io/. 在JavaScript中,this对象是运行时基于函数的执行环境(也就是上下文)绑定的. 从react中的demo说起 Facebook最近一次更新react时,将es6中的class加入了组件的创建方式当中.Facebook也推荐组件创建使用通过定义一个继承自 React.Component 的class来定义一个组件类.官方的demo: class LikeButton extends React.Component

  • 深入浅析react native es6语法

    react native是直接使用es6来编写代码,许多新语法能提高我们的工作效率 解构赋值 var { StyleSheet,Text,View } = React; 这句代码是ES6 中新增的解构(Destructuring)赋值语句.准许你获取对象的多个属性并且使用一条语句将它们赋给多个变量. 上面的代码等价于: var StyleSheet = React.StyleSheet; var Text = React.Text; var View = React.View 再看几个例子,以前

  • React.js中常用的ES6写法总结（推荐）

    一 模块 1 引入模块以便使用 用import实现: import '模块文件地址' import 组件 from '模块文件地址' 2 导出模块 用export default实现: export default class MyComponent extends Component{ ... } 引用: import MyComponent from './MyComponent'; 二 组件 1 定义组件 通过定义一个继承自React.Component的class来定义一个组件类: cl

  • 利用ES6语法重构React组件详解

    一.创建组件 ES6 class创建的组件语法更加简明,也更符合javascript.内部的方法不需要使用function关键字. React.createClass import React from 'react'; const MyComponent = React.createClass({ render: function() { return ( <div>以前的方式创建的组件</div> ); } }); export default MyComponent; Rea

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

    本文主要跟大家分享了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: Re

  • Jtable和JTree的写法示例代码

    我们首先看看Jtable和JTree的基本概念和常用构造方法. 一:表格(JTable): 1.基本概念: 表格(JTable)是Swing新增加的组件,主要是为了将数据以表格的形式显示.给显示大块数据提供了简单的机制. 2.常用构造方法: * JTable():使用系统默认的模型创建一个JTable 实例. * JTable(int numRows,int numColumns):创建一个使用DefaultTableModel 指定行.列的空表格. * JTable(Object[ ][ ]

  • Vue实现上拉加载下一页效果的示例代码

    Vue实现上拉加载下一页效果的示例代码

    之前从来没有单独的做过手机端的网页.当然,之前我也没有独立的从切图到写代码交互做过前端的页面. 这里边的分页还是和响应电脑端的数字分页.但是,其实独立做一个手机端的网站,而不是响应式的网站的时候,这种数字分页看起来可能是不太好. 手机端网站嘛,还是仿照着APP或者是微信小程序那种上拉触底分页比较好.但是,这个玩意怎么实现呢? 第一种想法,监听滚动条,滚动条滚动到页面底部,触发方法,请求接口加载下一页的数据.嗯,应该是可行的,我们来尝试一下: 监听滚动条所在位置的方法如下: /** * @name

  • SSM框架下实现登录注册的示例代码

    基本配置:jdk1.8   tomcat 8  MyEclipse 先打好地基: spring配置文件 application.xml: <?xml version="1.0" encoding="UTF-8"?> <beans xmlns="http://www.springframework.org/schema/beans" xmlns:xsi="http://www.w3.org/2001/XMLSchema-

  • Java实现驼峰和下划线互相转换的示例代码

    Java实现驼峰和下划线互相转换的示例代码

    目录 前言 1.驼峰与下划线互转 2.测试 3.方法补充 前言 基本语法 首先我们要知道java的基础语法. 1.由26个英文字母大小写,0-9,_或$组成 2.数字不可以开头 3.不可以使用关键字和保留字,但是能包括关键字和保留字 4.Java中严格区分大小写,长度无限制 5.标识符不能包括空格 6.取名尽量做到“见名知意” 驼峰命名法 骆驼式命名法(Camel-Case)又称驼峰式命名法,是电脑程式编写时的一套命名规则(惯例). 正如它的名称CamelCase所表示的那样,是指混合使用大小写

  • react组件基本用法示例小结

    本文实例讲述了react组件基本用法.分享给大家供大家参考,具体如下: 组件间传值: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>test</title> </head> <body> <div id="app"> </div> &l

  • element-ui下拉菜单组件Dropdown的示例代码

    element-ui下拉菜单组件Dropdown的示例代码

    项目中使用了element ui的页面组件. 在使用dropdown组件的时候,发现了我自己的一些问题,这里记录一下,文末有整理好的我自己用的一个demo.可下载. 基础的使用方法可以参照官方文档: element.eleme.io/#/zh-CN/com… 这里边给出的解释还是很全的,只是,刚刚接触的同学(比如我),有些地方注意不到,有些坑还得踩一踩. 首先上代码: 先是html部分: <div id='app' style="margin:50px;">        

  • React实现双向绑定示例代码

    前言 React.js现在已经很流行了,不会React.js都不好意思说自己会前端了. 那么下面就来看看关于React双向绑定的实现. 双向绑定的使用: 组件需要mixins:引用LinkedStateMixin.它提供一个linkState方法. 参数是state属性 双向绑定用valueLink={this.linkState(XX)} linkState方法返回一个对象,有一个value属性,指定state的属性. 还有一个requestChange回调方法,用来实现state的修改.参数

  • 基于vue实现新闻自下往上滚动效果(示例代码)

    基于vue实现新闻自下往上滚动效果(示例代码)

    如图所示自下往上滚动鼠标放上暂停滚动 鼠标移出继续滚动 一.html: <div class="newsList" @mouseover="mouseOver" @mouseout="mouseOut"> <ul id="con1" ref="con1" :class="{ anim: animate == true }"> <li v-for="

  • vue elementui 实现搜索栏子组件封装的示例代码

    vue elementui 实现搜索栏子组件封装的示例代码

    目录 前言 需求 实现 子组件(search.vue) 父组件部分主要代码(index.vue) 前言 描述: 在基本项目中搜索栏.分页组件格式样式几乎是固定的,只是对应的数据不同,由于模块会随着需求的不断增加,可能会导致重复代码越来越多,这时可以用到子组件,需要将相同的模块代码统一封装,提高开发效率和页面统一.(自己的想法,只根据自己需求来说) 需求 实现 子组件(search.vue) html <template> <div class="search-main"

随机推荐