上文中说到了组件了。
我们使用组件的目的最大莫过于复用，提供生产效率。
那么，这时候组件就应该能够提供一些”api”出来，让开发者去定义在不同场景下的不同表现，比如，行为或外观等。
而这些“api”就是 属性
 
在React中，用 props 访问实例元素的属性
 
属性：props
比如在JSX片段中，组件的实例元素有一个属性onoff:
 React.render(

 　　<ezlampcomp onoff="off"></ezlampcomp> ,

 　　document.querySelector("#content"));
 
在组件的实现中，我们可以通过props字段访问这个属性。
 
在JSX中，我们可以将JS表达式赋给React元素的属性，这个需要使用一对大括号
 var myOnoff = "on";

 React.render(

 <ezlampcomp onoff={myOnoff}></ezlampcomp>,

 document.querySelector("#content"));
当然，为了更好理解，我们把JSX转换成JS看看：
 var myOnoff = "on";

 React.render(

     React.createElement(

         EzLampComp,

         {

             onoff : myOnoff

         }

     ),

     document.querySelector("#content")

 );
 
我们先来练下手，用表达式的方式去实现一个闪动的效果，其中类名 ez-lamp表示一个灯。
直接上代码了。
 
下面是CSS：
 <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>
 
注意：上一篇里面说了，JSX里面虽然写起来跟HTML差不多，但是CSS类名还是要用className
 　　  如onclick等也要写成onClick,驼峰式的写法。
 
 
 
内联样式
有时候我们不得已，必须要用内联样式。
在React中内联样式必须是一个JSON对象，字段对应样式属性名称，比如要渲染出
 //HTML

 <div style=“borderRadius:50%;height:200px;width:200px"></div>
 
我们需要这样写React
 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,...);
注意：
  1. 对应的属性名称需要用驼峰式，如border-radius要用borderRadius，background-image要用backgroundImage
  2. 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再探（二）的更多相关文章

  1. React.js再探（四）

    不知道看官们还记不记得上一节的内容,关于生命周期的.我们来个例子重温且练习一下. 传送门:http://www.cnblogs.com/galenyip/p/4574400.html 我们来实现一下时 ...

  2. React.js再探（三）

    很多时候,组件实例的外观和行为我们通过props进行定制就可以了.因为任何时候,组件实例的表现只跟 传过来的props属性 相关. 我们称这种为 无状态/ stateless 组件 即它自身是 无记忆 ...

  3. React.js终探（七）(完)

    我们在前面介绍了组件的各种特性,这一节我们来说说多组件的情况. 在实际开发中,我们的组件难免会遇到有公共部分的情况,如果是个别情况还好,但如果数量比较多的话,那这时候,就需要公用了. 怎么公用呢? R ...

  4. React.js终探（六）

    在React中,我们怎么样使用它跟CSS 3 动画结合在一起使用呢? CSS3 Transitoin CSS3动画要求DOM属性变化的时候才能够被触发.所以这就需要我们把属性变化后的React元素渲染 ...

  5. .Net平台-MVP模式再探(二)

    PS:     本文与  上一遍文章  没有什么必然的联系,可以说是对于MVP的一定的加深,或许在理解上比上一篇多有点难度. 正文   一.简单讲讲MVP是什么玩意儿 如果从层次关系来讲,MVP属于P ...

  6. react.js 从零开始（二）组件的生命周期

    什么是生命周期? 组件本质上是一个状态机,输入确定,输出一定确定. 当状态改变的时候 会触发不同的钩子函数,可以让开发者做出响应.. 一个组件的生命周期可以概括为 初始化:状态下 可以自定义的函数 g ...

  7. React.js终探（五）

    在React中,一切都是看做组件. 而组件的嵌套也是十分常见的. 所以有的组件就作为容器组件 容器组件 React元素可以包含子元素 如 //JSX <ezpanel title="t ...

  8. 再谈React.js实现原生js拖拽效果

    前几天写的那个拖拽,自己留下的疑问...这次在热心博友的提示下又修正了一些小小的bug,也加了拖拽的边缘检测部分...就再聊聊拖拽吧 一.不要直接操作dom元素 react中使用了虚拟dom的概念,目 ...

  9. 从源码的角度再看 React JS 中的 setState

    在这一篇文章中,我们从源码的角度再次理解下 setState 的更新机制,供深入研究学习之用. 在上一篇手记「深入理解 React JS 中的 setState」中,我们简单地理解了 React 中 ...

随机推荐

  1. 使用dfs实现1至n全阵列

    使用dfs实现1至n全阵列. 我的方法是从所述第一位置开始,使用dfs看上去就像每个头号位置, 当某个位置.从小到大枚举1至n所有号码,打假说 尚未使用之前在这个位置上的几个选择这个号码.然后搜索下 ...

  2. Android菜鸟的成长笔记（15）—— Android中的状态保存探究（下）

    原文:Android菜鸟的成长笔记(15)-- Android中的状态保存探究(下) 在上一篇中我们简单了解关于Android中状态保存的过程和原理,这一篇中我们来看一下在系统配置改变的情况下保存数据 ...

  3. 长方柱类【C++ 类定义】

    Description 编写基于对象的程序,求长方柱(Bulk)的体积.数据成员包括长(length).宽(width).高(heigth).体积,要求用成员函数实现下面的功能: (1)由键盘输入长方 ...

  4. Restify —— 在Node.js中构建正确的REST Web服务

    http://restify.com/ https://segmentfault.com/a/1190000000369308 https://cnodejs.org/topic/516774906d ...

  5. Cocos2d-x 如何输出 Android用电话 腰带Tag的Log刊物

    于Cocos2d-x根据代码 #if(CC_TARGET_PLATFORM == CC_PLATFORM_WIN32) #define LOGAnroid( ...) #else if (CC_TAR ...

  6. 全栈JavaScript之路（十七）HTML5 新增字符集属性

    HTML5 添加�了几个文档字符集属性. document.charset : 表示文档的实际使用的字符集. document.defaultCharset: 表示默认的字符集,跟浏览器以及操作系统设 ...

  7. XCL-Charts绘画面积图(AreaChart) 例1

    样本区域地图,发现区域图的时候把做向上注视位置图更具优势的管理.在改变. 区域图网格和轴是不一样的处理与其它图, 它是用来表示其影响范围的覆盖范围,车桥无段伸出. 在这里下处理. watermark/ ...

  8. 顺序表----java实现

    最简单的数据结构--顺序表,此处以数组为例. 顺序表的优点:支持随机读取,内存空间利用率高. 顺序表的缺点:1.需要预先给出最大数据元素个数,这往往很难实现. 2.插入和删除时需要移动大量数据. Se ...

  9. Bash多个配置文件通常用于

    Login shells阅读下面的启动文件: 文件 内容 /etc/profile 对全部用户开放的全局配置文件 ~/.bash_profile 某个用户个人的启动文件,能用作个人的全局设置 ~/.b ...

  10. 创建高性能移动 web 站点【转载】

    如果你的网站3秒钟没有响应,人们就会失去兴趣了.为了满足响应快这个愿望,需要一个不同的方法在手机上进行分析,设计和测试. 这篇文章将会对Johan Johansson在2013年4月提出"  ...