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

最新推荐文章于 2026-04-16 07:59:03 发布

原创最新推荐文章于 2026-04-16 07:59:03 发布 · 2.7k 阅读

2 ·

本内容遵循CC 4.0 BY-SA版权协议

本文是ReactJS入门教程，介绍了React基于组件化的开发方式，如何通过属性传递值，以及组件样式设置，包括外部CSS样式和内部样式的应用，强调了组件名称和变量名的规范。

关于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>