上文中说到了组件了。
我们使用组件的目的最大莫过于复用，提供生产效率。
那么，这时候组件就应该能够提供一些”api”出来，让开发者去定义在不同场景下的不同表现，比如，行为或外观等。
而这些“api”就是
属性 在React中，用
props 访问实例元素的属性
属性：props比如在JSX片段中，组件的实例元素有一个属性onoff:
1 React.render(2 <ezlampcomp onoff="off"></ezlampcomp> ,3 document.querySelector("#content")); 在组件的实现中，我们可以通过props字段访问这个属性。
在JSX中，我们可以将JS
表达式赋给React元素的属性，这个需要使用一对大括号
1 var myOnoff = "on";2 React.render(3 <ezlampcomp onoff={myOnoff}></ezlampcomp>,4 document.querySelector("#content"));
当然，为了更好理解，我们把JSX转换成JS看看：
1 var myOnoff = "on"; 2 React.render( 3 React.createElement( 4 EzLampComp, 5 { 6 onoff : myOnoff 7 } 8 ), 9 document.querySelector("#content")10 );
我们先来练下手，用表达式的方式去实现一个闪动的效果，其中类名 ez-lamp表示一个灯。
直接上代码了。
下面是CSS：
1 <style> 2 .ez-lamp{ 3 display : inline-block; 4 margin : 5px; 5 width : 30px; 6 height : 30px; 7 border-radius : 50%; 8 } 9 .ez-lamp.on{10 opacity : 1;11 background : -webkit-radial-gradient(30% 30%,white 5%,red 95%);12 }13 .ez-lamp.off{14 opacity : 0.5;15 background : -webkit-radial-gradient(30% 30%,#888 5%,red 95%);16 }17 </style>
下面是实现部分：
1 <script type = "text/jsx"> 2 //定义React组件 3 var EzLampComp = React.createClass({ 4 render : function(){ 5 6 //取得属性值 7 var onoff = this.props.onoff; 8 9 //返回React元素10 if(onoff == "on")11 return <span className = "ez-lamp on"></span>;12 else13 return <span className = "ez-lamp off"></span>;14 }15 });16 17 var myOnoff = "on";18 19 setInterval(function() {20 21 //渲染React元素22 React.render(23 <EzLampComp onoff={myOnoff}/> , 24 document.querySelector("#content"));25 26 myOnoff = myOnoff == "on" ? "off" : "on";27 28 }, 1000);29 30 31 </script>
注意：上一篇里面说了，JSX里面虽然写起来跟HTML差不多，但是CSS类名还是要用className
如onclick等也要写成onClick,驼峰式的写法。
内联样式有时候我们不得已，必须要用内联样式。
在React中内联样式必须是一个
JSON对象，字段对应样式属性名称，比如要渲染出
1 //HTML2 <div style=“borderRadius:50%;height:200px;width:200px"></div>
我们需要这样写React
1 var myStyle = { 2 borderRadius:”50%", 3 width:"200px", 4 height:"200px" 5 }; 6 //JSX 7 var e = <div ></div>; 8 //JavaScript 9 var e = React.createElement(10 "div",{11 style : myStyle12 }13 );14 //render15 React.render(e,...);
注意：- 对应的属性名称需要用驼峰式，如border-radius要用borderRadius，background-image要用backgroundImage
- hack的前缀（-webkit, -moz, -o, -ms），除了ms，其他首字母都要大写，如-webkit-transition就是WebkitTransition, -ms-transition就是msTransition
比如我们要实现这样的效果
用内联样式实现的方法如下：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>ex15:EzLampComp</title> 6 <script src='/images/loading.gif' data-original="lib/react.js"></script> 7 <script src='/images/loading.gif' data-original="lib/JSXTransformer.js"></script> 8 <style> 9 .ez-lamp{10 display : inline-block;11 margin : 5px;12 width : 30px;13 height : 30px;14 }15 </style>16 </head>17 <body>18 <div id="content"></div>19 <script type = "text/jsx">20 //定义React组件21 var EzLampComp = React.createClass({22 render : function(){23 //取得属性值24 var color = this.props.color,25 onoff = this.props.onoff;26 //亮光颜色27 var lights = {28 "off":"#888",29 "on":"#fff"30 };31 //透明度32 var opacity ={33 "off":0.5,34 "on":1.035 };36 //根据属性设置附加的样式37 var style = {38 borderRadius : "50%", //对应样式：border-radius39 opacity : opacity[this.props.onoff],40 background : "-webkit-radial-gradient(30% 30%," + lights[onoff] + " 5%," + color +" 95%)"41 };42 //返回React元素43 return <span className="ez-lamp" style={style}></span>; //JSX44 }45 });46 //渲染React元素47 React.render(48 <div>49 <EzLampComp color="green" onoff="off"/>50 <EzLampComp color="green" onoff="on"/>51 <EzLampComp color="red" onoff="off"/>52 <EzLampComp color="red" onoff="on"/>53 <EzLampComp color="blue" onoff="off"/>54 <EzLampComp color="blue" onoff="on"/>55 </div>56 ,document.querySelector("#content"));57 </script>58 </body>59 </html>
先喝口水休息一下先....
原标题：React.js再探（二）
关键词：JS
我知道了 