React.js再探（二）

2024-04-27 14:08:12

字体：大中小

来源：转载

供稿：网友

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 style="{myStyle}"></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="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>

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

上一篇：React-Native入门指南——第4篇react-native布局实战（二）

下一篇：React.js初探（一）