上文中说到了组件了。
我们使用组件的目的最大莫过于复用，提供生产效率。
那么，这时候组件就应该能够提供一些”api”出来，让开发者去定义在不同场景下的不同表现，比如，行为或外观等。
而这些“api”就是 属性
在React中，用 props 访问实例元素的属性
属性：props
比如在JSX片段中，组件的实例元素有一个属性onoff:
React.render(
<ezlampcomp onoff="off"></ezlampcomp> ,
document.querySelector("#content"));
在组件的实现中，我们可以通过props字段访问这个属性。
在JSX中，我们可以将JS表达式赋给React元素的属性，这个需要使用一对大括号
var myOnoff = "on";
React.render(
<ezlampcomp onoff={myOnoff}></ezlampcomp>,
document.querySelector("#content"));
当然，为了更好理解，我们把JSX转换成JS看看：
var myOnoff = "on";
React.render(
React.createElement(
EzLampComp,
{
onoff : myOnoff
}
),
document.querySelector("#content")
);
我们先来练下手，用表达式的方式去实现一个闪动的效果，其中类名 ez-lamp表示一个灯。
直接上代码了。
下面是CSS：
<style>
.ez-lamp{
display : inline-block;
margin : 5px;
width : 30px;
height : 30px;
border-radius : 50%;
}
.ez-lamp.on{
opacity :;
background : -webkit-radial-gradient(30% 30%,white 5%,red 95%);
}
.ez-lamp.off{
opacity : 0.5;
background : -webkit-radial-gradient(30% 30%,#888 5%,red 95%);
}
</style>
下面是实现部分：
<script type = "text/jsx">
//定义React组件
var EzLampComp = React.createClass({
render : function(){ //取得属性值
var onoff = this.props.onoff; //返回React元素
if(onoff == "on")
return <span className = "ez-lamp on"></span>;
else
return <span className = "ez-lamp off"></span>;
}
}); var myOnoff = "on"; setInterval(function() { //渲染React元素
React.render(
<EzLampComp onoff={myOnoff}/> ,
document.querySelector("#content")); myOnoff = myOnoff == "on" ? "off" : "on"; }, 1000); </script>
注意：上一篇里面说了，JSX里面虽然写起来跟HTML差不多，但是CSS类名还是要用className
如onclick等也要写成onClick,驼峰式的写法。
内联样式
有时候我们不得已，必须要用内联样式。
在React中内联样式必须是一个JSON对象，字段对应样式属性名称，比如要渲染出
//HTML
<div style=“borderRadius:50%;height:200px;width:200px"></div>
我们需要这样写React
var myStyle = {
borderRadius:”50%",
width:"200px",
height:"200px"
};
//JSX
var e = <div style="{myStyle}"></div>;
//JavaScript
var e = React.createElement(
"div",{
style : myStyle
}
);
//render
React.render(e,...);
注意：
- 对应的属性名称需要用驼峰式，如border-radius要用borderRadius，background-image要用backgroundImage
- hack的前缀（-webkit, -moz, -o, -ms），除了ms，其他首字母都要大写，如-webkit-transition就是WebkitTransition, -ms-transition就是msTransition
比如我们要实现这样的效果
用内联样式实现的方法如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ex15:EzLampComp</title>
<script src="lib/react.js"></script>
<script src="lib/JSXTransformer.js"></script>
<style>
.ez-lamp{
display : inline-block;
margin : 5px;
width : 30px;
height : 30px;
}
</style>
</head>
<body>
<div id="content"></div>
<script type = "text/jsx">
//定义React组件
var EzLampComp = React.createClass({
render : function(){
//取得属性值
var color = this.props.color,
onoff = this.props.onoff;
//亮光颜色
var lights = {
"off":"#888",
"on":"#fff"
};
//透明度
var opacity ={
"off":0.5,
"on":1.0
};
//根据属性设置附加的样式
var style = {
borderRadius : "50%", //对应样式：border-radius
opacity : opacity[this.props.onoff],
background : "-webkit-radial-gradient(30% 30%," + lights[onoff] + " 5%," + color +" 95%)"
};
//返回React元素
return <span className="ez-lamp" style={style}></span>; //JSX
}
});
//渲染React元素
React.render(
<div>
<EzLampComp color="green" onoff="off"/>
<EzLampComp color="green" onoff="on"/>
<EzLampComp color="red" onoff="off"/>
<EzLampComp color="red" onoff="on"/>
<EzLampComp color="blue" onoff="off"/>
<EzLampComp color="blue" onoff="on"/>
</div>
,document.querySelector("#content"));
</script>
</body>
</html>
先喝口水休息一下先....