React getInitialState desc
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="../../build/react-with-addons.js"></script>
<script src="../../build/JSXTransformer.js"></script>
</head>
<body>
<div id="demo"></div>
<hr>
<div id="app"></div>
<div id="likeBtn"></div>
<script type="text/jsx">
/** @jsx React.DOM */
var HelloMessage = React.createClass({
render: function () {
return <div>Hello, {this.props.name}</div>;
}
}); React.renderComponent(<HelloMessage name="Jack"/>, document.getElementById('demo'));
</script>
<script type="text/jsx">
/** @jsx React.DOM */
var App = React.createClass({
componentDidMount: function () {
console.log(this.props.children);
},
render: function () {
return <div><span></span></div>
}
}); React.renderComponent(<App></App>, document.getElementById('app'));
</script>
<script type="text/jsx">
/** @jsx React.DOM */
var LikeButton = React.createClass({
getInitialState: function () {
return {
liked: false
};
},
handleClick: function (event) {
this.setState({
liked: !this.state.liked
});
},
handleMouseEnter: function () {
console.log(this);
},
render: function () {
var text = this.state.liked ? 'like' : 'unlike';
return (
<p onClick= {this.handleClick} >
You {text} Click to toggle
</p>
);
}
}); React.renderComponent(<LikeButton />, document.getElementById('likeBtn'));
</script>
</body>
</html>
React getInitialState desc的更多相关文章
- React学习小结（三）
一.React数据的传输 1.属性和状态是react中数据传递的载体 2.属性是声明以后不允许被修改的东西 3.属性只能在组件初始化的时候声明并传入组件内部,并且在组件内部通过this.props获取 ...
- 使用scss + react + webpack + es6实现幻灯片
写在前面: 刚学习完慕课网里的一个幻灯片案例,自己加了刚学的react,两者结合.首先让大家看看效果 点击此处 你可以先用纯js实现上面的效果:我的github上的 JS代码 或者 观看慕课提供的课程 ...
- react中，constructor和getInitialState的区别
1,ES6语法 使用class声明一个类,且要继承react组件的方法和属性的时候 : 在里面我们可以直接指定 this.state = { }, 我们可以当前组件内任何地方使用 this.setSt ...
- React的getDefaultProps和getInitialState
getDefaultProps 不是获取默认props,而是设置默认props,主要用在ES5的React写法中getInitialState 不是获取默认State,而是设置初始的state,主要是 ...
- Node.js建站笔记-使用react和react-router取代Backbone
斟酌之后,决定在<嗨猫>项目中引入react,整体项目偏重spa模式,舍弃部分server端的模板渲染,将一部分渲染工作交给前端react实现. react拥有丰富的组件,虽然不如Back ...
- 初探React与D3的结合-或许是visualization的新突破？
自诞生之初截止目前(2016年初),React可以说是前端界最流行的话题,如果你还不知道React是何物,你就该需要充充电了. d3是由纽约时报工程师开源的一个绘制基于svg的数据可视化工具,是近几年 ...
- [React]全自动数据表格组件——BodeGrid
表格是在后台管理系统中用的最频繁的组件之一,相关的功能有数据的新增和编辑.查询.排序.分页.自定义显示以及一些操作按钮.我们逐一深入进行探讨以及介绍我的设计思路: 新增和编辑 想想我们最开始写新增 ...
- 介绍一项让 React 可以与 Vue 抗衡的技术
好吧,我承认我是标题党.React 明明如日中天,把它与 Vue 倒过来,给 Vue 加点东西或可与 React 抗衡.不过,这两年 Vue 干的正是这事,不断加东西,不断优化,按它现有发展速度超越 ...
- React 可视化开发工具 shadow-widget 的非可视开发方法
Shadow Widget 提倡在可视设计器中开发用户界面,输出转义标签,而非 JSX.许多童鞋可能不知道 SW 同样支持用 JSX 设计界面,开发体验比原生 React 编程好出很多,本文就介绍这方 ...
随机推荐
- 【Merge Two Sorted Lists】cpp
题目: Merge two sorted linked lists and return it as a new list. The new list should be made by splici ...
- 【Binary Tree Inorder Traversal】cpp
题目: Given a binary tree, return the inorder traversal of its nodes' values. For example:Given binary ...
- modernizr.js
1.判断浏览器是否支持 h5 if(Modernizr.canvas){ alert(123); }else{ alert(321); } 2.判断浏览器是否支持 canvas function su ...
- Java 死锁诊断 -- 线程转储
java线程转储 java的线程转储可以被定义为JVM中在某一个给定的时刻运行的所有线程的快照.一个线程转储可能包含一个单独的线程或者多个线程.在多线程环境中,比如J2EE应用服务器,将会有许多线程和 ...
- Memcached使用
一.Memcached简介 Memcached 是一个高性能的分布式内存对象缓存系统,用于动态Web应用以减轻数据库负载.它通过在内存中缓存数据和对象来减少读取数据库的次数,从而提高动态.数据库驱动网 ...
- Core Data 版本数据迁移
Core Data版本迁移基础 通常,在使用Core Data的iOS App上,不同版本上的数据模型变更引发的数据迁移都是由Core Data来负责完成的.这种数据迁移模式称为Lightweight ...
- MariaDB Galera Cluster集群
一.MariaDB Galera Cluster概要: 1.简述: MariaDB Galera Cluster 是一套在mysql innodb存储引擎上面实现multi-master及数据实时同步 ...
- sql server 数据库 数据DateTime 转mysql
首先将sql server DateTime 转换为varchar(50) 然后更新转换过的 DateTime字段, UPDATE 表名 SET LastUpdateTime=CONVERT(VAR ...
- Ehcache使用
http://www.360doc.com/content/14/0423/17/16946725_371472946.shtml http://www.myexception.cn/web-appl ...
- poj 3072(最短路)
题目链接:http://poj.org/problem?id=3072 一涉及稍微计算几何方面的东西就要做好久,一开始先用SPFA写的,可能是由于松弛次数过多导致精度损失,郁闷了好久,然后改成Dijk ...