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 编程好出很多,本文就介绍这方 ...
随机推荐
- 如何ping通两台计算机
如何ping通两台计算机 因为ping是基于IP协议的,所以,先要保证两台计算机在同一个子网中,这里涉及到vlan和子网的概念 若两台主机不在同一个子网中则无法ping通 若两台主机在同一个子网中却p ...
- Python 删除列表中的重复数据
list0=['b','c', 'd','b','c','a','a'] 方法1:使用set() list1=sorted(set(list0),key=list0.index) # sorted o ...
- Nginx问题总汇
http://blog.csdn.net/llnara/article/details/8691049 关键字: open var run nginx pid failed 产生原因:添加模块,重编译 ...
- 读《我是一只IT小小鸟》有感
时间太瘦,指缝太宽.一晃一学期过去了,有些迷茫,但也相信未来是美好的.当我看完<我是一只IT小小鸟>这本书之后,心中更是感慨万千.每一个励志的故事都值得欣赏.深思,甚至我还幻想 ...
- bzoj 3170 manhattan距离
首先将坐标系顺时针旋转45度,得到一个新的坐标系,这个坐标系 对应的坐标的manhattan距离就是原图中的距离,然后快排,利用前缀和 数组O(N)求所有的答案,然后找最小值就行了,总时间O(Nlog ...
- 标准SQL
1. SQL语句对大小写不敏感! 2. 查询和更新指令构成了 SQL 的 DML 部分: SELECT - 从数据库表中获取数据 UPDATE - 更新数据库表中的数据 DELETE - 从数据库表中 ...
- ubuntu搭建lnmp
http://wiki.ubuntu.org.cn/Nginx#.E5.AE.89.E8.A3.85Php.E5.92.8Cmysql
- linux下解压命令大全(转载)
.tar 解包:tar xvf FileName.tar 打包:tar cvf FileName.tar DirName (注:tar是打包,不是压缩!) ——————————————— .gz 解压 ...
- Sqli-labs less 53
Less-53 和less51是一样的,只是这里的mysql错误不会在前台显示,但是对于stacked injection是一样的利用方式 http://127.0.0.1/sqli-labs/Les ...
- 使用命令行编译、打包、运行WordCount--不用eclipse
1)首先创建WordCount1023文件夹,然后在此目录下使用编辑器,例如vim编写WordCount源文件,并保存为WordCount.java文件 /** * Licensed under th ...