zoukankan      html  css  js  c++  java
  • 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;
            }

      

  • 相关阅读:
    第一次作业
    C语言I博客作业02
    C语言|博客作业11
    C语言I博客作业10
    C语言I博客作业09
    C语言I博客作业08
    C语言I博客作业07
    C语言I博客作业06
    C语言I博客作业05
    JDK-14 & Eclipse & Hello World!
  • 原文地址:https://www.cnblogs.com/nurdun/p/6745494.html
Copyright © 2011-2022 走看看