React.js再探(二)
React.render(
<ezlampcomp onoff="off"></ezlampcomp> ,
document.querySelector("#content"));
var myOnoff = "on";
React.render(
<ezlampcomp onoff={myOnoff}></ezlampcomp>,
document.querySelector("#content"));
var myOnoff = "on";
React.render(
React.createElement(
EzLampComp,
{
onoff : myOnoff
}
),
document.querySelector("#content")
);
<style>
.ez-lamp{
display : inline-block;
margin : 5px;
width : 30px;
height : 30px;
border-radius : 50%;
}
.ez-lamp.on{
opacity :;
background : -webkit-radial-gradient(30% 30%,white 5%,red 95%);
}
.ez-lamp.off{
opacity : 0.5;
background : -webkit-radial-gradient(30% 30%,#888 5%,red 95%);
}
</style>
<script type = "text/jsx">
//定义React组件
var EzLampComp = React.createClass({
render : function(){ //取得属性值
var onoff = this.props.onoff; //返回React元素
if(onoff == "on")
return <span className = "ez-lamp on"></span>;
else
return <span className = "ez-lamp off"></span>;
}
}); var myOnoff = "on"; setInterval(function() { //渲染React元素
React.render(
<EzLampComp onoff={myOnoff}/> ,
document.querySelector("#content")); myOnoff = myOnoff == "on" ? "off" : "on"; }, 1000); </script>
//HTML
<div style=“borderRadius:50%;height:200px;width:200px"></div>
var myStyle = {
borderRadius:”50%",
width:"200px",
height:"200px"
};
//JSX
var e = <div style="{myStyle}"></div>;
//JavaScript
var e = React.createElement(
"div",{
style : myStyle
}
);
//render
React.render(e,...);
- 对应的属性名称需要用驼峰式,如border-radius要用borderRadius,background-image要用backgroundImage
- hack的前缀(-webkit, -moz, -o, -ms),除了ms,其他首字母都要大写,如-webkit-transition就是WebkitTransition, -ms-transition就是msTransition
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ex15:EzLampComp</title>
<script src="lib/react.js"></script>
<script src="lib/JSXTransformer.js"></script>
<style>
.ez-lamp{
display : inline-block;
margin : 5px;
width : 30px;
height : 30px;
}
</style>
</head>
<body>
<div id="content"></div>
<script type = "text/jsx">
//定义React组件
var EzLampComp = React.createClass({
render : function(){
//取得属性值
var color = this.props.color,
onoff = this.props.onoff;
//亮光颜色
var lights = {
"off":"#888",
"on":"#fff"
};
//透明度
var opacity ={
"off":0.5,
"on":1.0
};
//根据属性设置附加的样式
var style = {
borderRadius : "50%", //对应样式:border-radius
opacity : opacity[this.props.onoff],
background : "-webkit-radial-gradient(30% 30%," + lights[onoff] + " 5%," + color +" 95%)"
};
//返回React元素
return <span className="ez-lamp" style={style}></span>; //JSX
}
});
//渲染React元素
React.render(
<div>
<EzLampComp color="green" onoff="off"/>
<EzLampComp color="green" onoff="on"/>
<EzLampComp color="red" onoff="off"/>
<EzLampComp color="red" onoff="on"/>
<EzLampComp color="blue" onoff="off"/>
<EzLampComp color="blue" onoff="on"/>
</div>
,document.querySelector("#content"));
</script>
</body>
</html>
React.js再探(二)的更多相关文章
- React.js再探(四)
不知道看官们还记不记得上一节的内容,关于生命周期的.我们来个例子重温且练习一下. 传送门:http://www.cnblogs.com/galenyip/p/4574400.html 我们来实现一下时 ...
- React.js再探(三)
很多时候,组件实例的外观和行为我们通过props进行定制就可以了.因为任何时候,组件实例的表现只跟 传过来的props属性 相关. 我们称这种为 无状态/ stateless 组件 即它自身是 无记忆 ...
- React.js终探(七)(完)
我们在前面介绍了组件的各种特性,这一节我们来说说多组件的情况. 在实际开发中,我们的组件难免会遇到有公共部分的情况,如果是个别情况还好,但如果数量比较多的话,那这时候,就需要公用了. 怎么公用呢? R ...
- React.js终探(六)
在React中,我们怎么样使用它跟CSS 3 动画结合在一起使用呢? CSS3 Transitoin CSS3动画要求DOM属性变化的时候才能够被触发.所以这就需要我们把属性变化后的React元素渲染 ...
- .Net平台-MVP模式再探(二)
PS: 本文与 上一遍文章 没有什么必然的联系,可以说是对于MVP的一定的加深,或许在理解上比上一篇多有点难度. 正文 一.简单讲讲MVP是什么玩意儿 如果从层次关系来讲,MVP属于P ...
- react.js 从零开始(二)组件的生命周期
什么是生命周期? 组件本质上是一个状态机,输入确定,输出一定确定. 当状态改变的时候 会触发不同的钩子函数,可以让开发者做出响应.. 一个组件的生命周期可以概括为 初始化:状态下 可以自定义的函数 g ...
- React.js终探(五)
在React中,一切都是看做组件. 而组件的嵌套也是十分常见的. 所以有的组件就作为容器组件 容器组件 React元素可以包含子元素 如 //JSX <ezpanel title="t ...
- 再谈React.js实现原生js拖拽效果
前几天写的那个拖拽,自己留下的疑问...这次在热心博友的提示下又修正了一些小小的bug,也加了拖拽的边缘检测部分...就再聊聊拖拽吧 一.不要直接操作dom元素 react中使用了虚拟dom的概念,目 ...
- 从源码的角度再看 React JS 中的 setState
在这一篇文章中,我们从源码的角度再次理解下 setState 的更新机制,供深入研究学习之用. 在上一篇手记「深入理解 React JS 中的 setState」中,我们简单地理解了 React 中 ...
随机推荐
- 初探ExtJS(2)
二.建立第一个Demo.实现查数据库显示到页面 步骤:1.建立MySQL数据库表 2.整合SSH框架 3.用ExtJS显示 关键注意事项: Ext.data.JsonReader中root的含义,比如 ...
- 开源备份软件bacula安装记录--包括备份-恢复演练
该公司原先使用的备用机oracle-linux 5.7 不是很稳定执行.经常死机,新安装centos6.5, 即用bacula要备份的数据.在这里,有关安装故障记录,MEMO. 操作系统:centos ...
- 汉诺塔问题的java递归实现
import java.util.Scanner; public class Hanoi { int count=0; public void hanoi(int n,char A,char B,ch ...
- 国内外MD5在线解密网站
-http://www.cmd5.com/english.aspx (457,354,352,282) - http://www.md5crack.com - http://www.hashcheck ...
- HDU 4391 Paint The Wall 段树(水
意甲冠军: 特定n多头排列.m操作 以下是各点的颜色 以下m一种操纵: 1 l r col 染色 2 l r col 问间隔col色点 == 通的操作+区间内最大最小颜色数的优化,感觉非常不科学... ...
- js 模块化的规范
The Module Pattern,模块模式,也译为模组模式,是一种通用的对代码进行模块化组织与定义的方式.这里所说的模块(Modules),是指实现某特定功能的一组方法和代码.许多现 ...
- PHP操作数据库PDO
PHP操作数据库 载入数据库驱动 訪问phpinfo.php能够查看是否已经载入数据库驱动,例如以下显示还没有载入mySql数据库驱动. 在c盘找到php.ini配置文件开启载入mySql驱动,例如以 ...
- Team Foundation Server 2015使用教程--默认团队checkin权限修改
- 策略模式设计模式(Strategy)摘录
23种子GOF设计模式一般分为三类:创建模式.结构模型.行为模式. 创建模式抽象的实例.一个系统独立于怎样创建.组合和表示它的那些对象.一个类创建型模式使用继承改变被实例化的类,而一个对象创建型模式将 ...
- vim cheat sheet
watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvdTAxMzE1Mjg5NQ==/font/5a6L5L2T/fontsize/400/fill/I0JBQk ...