您的位置：首页 > Web前端 > React

reactjs入门一（文字透明度动态改变）

2016-04-29 12:01 471 查看

关于ReactJS，下面来总结一下，主要有以下几点：

1、ReactJs是基于组件化的开发，所以最终你的页面应该是由若干个小组件组成的大组件。

2、可以通过属性，将值传递到组件内部，同理也可以通过属性将内部的结果传递到父级组件(留给大家研究)；要对某些值的变化做DOM操作的，要把这些值放到state中。

3、为组件添加外部css样式时，类名应该写成className而不是class;添加内部样式时，应该是style={{opacity: this.state.opacity}}而不是style="opacity:{this.state.opacity};"。

4、组件名称首字母必须大写。

5、变量名用{}包裹，且不能加双引号。

<!DOCTYPE html>

<html>

<head>
<title>react.js</title>
<script src="build/react.js"></script>
<script src="build/JSXTransformer.js"></script>
<script src="build/jquery-1.10.2.js"></script>

</head>

<body>
<div id="container"></div>
<script type="text/jsx">
var Hello = React.createClass({
getInitialState:function(){
return {
opacity:1.0
};
},
componentDidMount:function(){
this.timer = setInterval(function(){
var opacity = this.state.opacity;
opacity -= 0.05;
if(opacity<0.1){
opacity = 1.0;
}
this.setState({
opacity:opacity
});
}.bind(this),100)
},
render:function(){
return (<div style={{opacity:this.state.opacity}}>hello, {this.props.name}</div>);
}
})
React.render(<Hello name="world"/>,document.getElementById('container'));
</script>

</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航