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 编程好出很多,本文就介绍这方 ...
随机推荐
- NSIS中判断.net framework 是否安装
在网上找了几个脚本,原理都是读取注册表进行判断,都可以用. 1.CheckDotNetFramework /* * Name: CheckDotNetFramework.nsh * Version: ...
- 【JQuery NoviceToNinja系列】01 开篇 Html页面设计和布局
01 开篇 Html页面设计和布局 index.html <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml ...
- Best Practices for Web Apps
Mobile Web Best Practices Exceptional Performance Let's make the web faster
- ASP.NET为图片加上水印
为我们发布的图片加上一个水印,也是我们经常要做的事情,那怎么样来做呢,下面就一步步开始吧 首先是一个制作水印的类:ImageHandler,代码如下: using System; using Syst ...
- Java对象初始化详解
在Java中,一个对象在可以被使用之前必须要被正确地初始化,这一点是Java规范规定的.本文试图对Java如何执行对象的初始化做一个详细深入地介绍(与对象初始化相同,类在被加载之后也是需要初始化的,本 ...
- Sqli-labs less 26a
Less-26a 这关与26的区别在于,sql语句添加了一个括号,同时在sql语句执行抛出错误后并不在前台页面输出.所有我们排除报错注入,这里依旧是利用union注入. sql语句为SELECT * ...
- hadoop安装问题
1. 运行start-dfs.sh启动HDFS守护进程,start-yarn.sh面向YARN的资源器和节点管理器,资源管理器web地址是http://localhost:8080/.输入stop.d ...
- javascript和“主流大型语言”（c# JAVA C++等）的差异
1.javascript不支持overload,因为它的函数参数是以数组方式来实现的,没有固定的参数签名,所以无法重载. 2.javascript的基本类型只有5个:number string boo ...
- awk处理之案例一：awk 处理百分比的问题
编译环境 本系列文章所提供的算法均在以下环境下编译通过. [脚本编译环境]Federa 8,linux 2.6.35.6-45.fc14.i686 [处理器] Intel(R) Core(TM)2 Q ...
- java Timer类
java.util 类 Timer java.lang.Object java.util.Timer public class Timerextends Object 一种工具,线程用其安排以后在后台 ...