你的位置:首页 > Java教程

[Java教程]React.js再探(二)


上文中说到了组件了。
我们使用组件的目的最大莫过于复用,提供生产效率。
那么,这时候组件就应该能够提供一些”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,...);

 

注意:
  1. 对应的属性名称需要用驼峰式,如border-radius要用borderRadius,background-image要用backgroundImage
  2. 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="lib/react.js"></script> 7 <script src="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>

 


 先喝口水休息一下先....