相信大家很多人像我这样学react都看过阮一峰老师博客。我之前也是看阮一峰老师的博客去学的react。现在因为项目编码规范要求要用es6,所以看了一下react的es6
写法。发现还是有一些差别的。不知道大家记不记得阮一峰老师博客中有一个定时改opacity属性的那个例子。今天我就把阮一峰老师的那个例子拿过来稍微加工的情况下改写成es6写法
js部分
//es6的方式创建组件 class Mydoc extends React.Component { // 定义组件的属性类型和默认属性 static defaultProps = { opacity:1.0 }; //初始化 constructor(props){ super(props); this.state = { opacity: this.props.opacity, }; } componentDidMount() { var timer = setInterval( function() { var opacity = this.state.opacity; if(opacity < 0.1){ opacity = 1.0; }else{ opacity -= 0.005; } this.setState({ opacity: opacity }); }.bind(this), 20); } render() { return ( <div className='myStyle' style = {{opacity:this.state.opacity}}>这是一个react组件</div> ) } }; ReactDOM.render( <Mydoc />, document.body )
css部分
.myStyle { margin: auto; width: 300px; height: 300px; background:#000; color: #fff; text-align: center; }