上文中说到了组件了。
我们使用组件的目的最大莫过于复用，提供生产效率。
那么，这时候组件就应该能够提供一些”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>
先喝口水休息一下先....
时间： 2024-10-09 21:10:36