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 编程好出很多,本文就介绍这方 ...
随机推荐
- 向Array中添加希尔排序
希尔排序思路 我们在第 i 次时取gap = n/(2的i次方),然后将数组分为gap组(从下标0开始,每相邻的gap个元素为一组),接下来我们对每一组进行直接插入排序. 希尔排序实现 Functio ...
- HTML5 编码规范
在编写HTML时,可能有一些方面不够规范,在通过对<HTML5编码规范>的学习后,采用代码注解的方式,做相关的整理,方便今后回顾. <!DOCTYPE html> <!- ...
- [转]Similarities between Hibernate and JDBC objects
- log4j.xml配置文件
<?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE log4j:configuration S ...
- C++ Template之非类型模板参数
非类型模板参数是通过基本变量类型引入,例如int,在使用时必须显式自定值,不能通过推断. 非类型模板参数的限制:不能是浮点数(在vc6.0上测试可以为浮点型),对象以及指向内部链接对象的指针. #in ...
- centos6.5安装图形界面，windows远程linux图形界面
1. 查询是否已安装图形界面 yum grouplist |more 在grouplist的输出结果中的“Installed Groups:”部分中,如果你能找到“X Window System”和G ...
- 4-Highcharts 3D图之3D普通饼图
<!DOCTYPE> <html lang='en'> <head> <title>4-Highcharts 3D图之3D普通饼图</title& ...
- Ambient Occlusion
一般在光照模型中,ambient light的计算方法为:A = l * m,其中l表示表面接收到的来自光源的ambient light的总量,而m表示表面接收到ambient light后,反射和吸 ...
- Google Chrome 浏览器禁用缓存
在使用 Google Chrome 浏览器调试 js 时,会发现修改完 js 不会立即生效,这是由于 chrome 浏览器缓存的原因,而在火狐下没有这个问题.经常使用 chrome 浏览器调试 js ...
- Nagios 快速实现数据可视化的几种方式
Nagios 是一款强大的开源监控软件,但他本身不能绘图,只能查看当前数据,不能看历史数据以及趋势,也正因此,想要更舒适的使用就要搭配绘图软件,现在可搭配的绘图软件有很多,例如 pnp4nagios, ...