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 编程好出很多,本文就介绍这方 ...
随机推荐
- vmware workstation 10.0
2013.9.3 vmware workstation 10.0 build 1295980新增功能– 可以将windows 8.1物理pc转变为虚拟机:unity模式增强,与windows 8.1 ...
- SQL Server 2008中新增的 1.变更数据捕获（CDC） 和 2.更改跟踪
概述 1.变更数据捕获(CDC) 每一次的数据操作都会记录下来 2.更改跟踪 只会记录最新一条记录 以上两种的区别: http://blog.csdn.n ...
- .NET设计模式（12）：外观模式（Façade Pattern）（转）
概述 在软件开发系统中,客户程序经常会与复杂系统的内部子系统之间产生耦合,而导致客户程序随着子系统的变化而变化.那么如何简化客户程序与子系统之间的交互接口?如何将复杂系统的内部子系统与客户程序之间的依 ...
- HDOJ 1429 胜利大逃亡(续)
胜利大逃亡(续) Time Limit: 4000/2000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others)Total Su ...
- HDOJ 1428 漫步校园
漫步校园 Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others)Total Submis ...
- 疯狂java讲义——多态
父类 f = new 子类(); 引用变量f,在编译时类型是父类,在运行时类型是子类类型.当这个引用变量调用子类重写父类的那个方法的时候,实际执行的是子类中重写后的那个方法.当运行的时候调用该变量的方 ...
- Sqli-labs less 31
Less-31 Less-31与上述两个例子的方式是一样的,我们直接看到less-31的sql语句: 所以payload为: http://127.0.0.1:8080/sqli-labs/Less- ...
- 全7 天玩转 ASP.NET MVC — 第 2 天
0. 前言 我相信在开始第 2 天的学习时,你已经顺利地完成了第 1 天的课程. 我们回顾一下第 1 天的主要关注点: 为什么选择 ASP.NET MVC ? ASP.NET Webforms 和 A ...
- poj 2749
Building roads Time Limit: 2000MS Memory Limit: 65536K Total Submissions: 6091 Accepted: 2046 De ...
- POJ 1273 Drainage Ditches（网络流dinic算法模板）
POJ 1273给出M条边,N个点,求源点1到汇点N的最大流量. 本文主要就是附上dinic的模板,供以后参考. #include <iostream> #include <stdi ...