上文中说到了组件了。
我们使用组件的目的最大莫过于复用，提供生产效率。
那么，这时候组件就应该能够提供一些”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;200px"></div>
我们需要这样写React
1 var myStyle = { 2 borderRadius:”50%", 3 "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,...);
注意：
- 对应的属性名称需要用驼峰式，如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="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>
先喝口水休息一下先....