React.js又探(二)

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   else
13   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 //HTML
2 <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 style="{myStyle}"></div>;
 8 //JavaScript
 9 var e = React.createElement(
10     "div",{
11         style : myStyle
12     }
13 );
14 //render
15 React.render(e,...);

 

注意:
  1. 对应的属性名称需要用驼峰式,如border-radius要用borderRadius,background-image要用backgroundImage
  2. hack的前缀(-webkit, -moz, -o, -ms),除了ms,其他首字母都要大写,如-webkit-transition就是WebkitTransition, -ms-transition就是msTransition
 
 
比如我们要实现这样的效果
React.js又探(二)
 
用内联样式实现的方法如下:
 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.0
35     };
36     //根据属性设置附加的样式
37     var style = {
38       borderRadius : "50%", //对应样式:border-radius
39       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>; //JSX
44   }
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>

 

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