react的ES6写法

相信大家很多人像我这样学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;
        }

  

原文地址:https://www.cnblogs.com/nurdun/p/6745494.html