React.js再探（二）

时间：2015-06-13 20:03:43 阅读：148 评论：0 收藏：0 [点我收藏+]

标签：

上文中说到了组件了。

我们使用组件的目的最大莫过于复用，提供生产效率。

那么，这时候组件就应该能够提供一些”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

内联样式

有时候我们不得已，必须要用内联样式。

在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,...);

注意：

对应的属性名称需要用驼峰式，如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>

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

React.js再探（二）

标签：

原文地址：http://www.cnblogs.com/galenyip/p/4573989.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行