码迷,mamicode.com
首页 > 其他好文 > 详细

react-es5转es6

时间:2017-11-15 23:49:07      阅读:401      评论:0      收藏:0      [点我收藏+]

标签:targe   return   size   ext   hang   export   obj   set   multi   

import React,{Component} from ‘react‘;
import { Input } from ‘antd‘;
import lebab from ‘lebab‘;
import SyntaxHighlighter from ‘react-syntax-highlighter‘;
import { docco } from ‘react-syntax-highlighter/dist/styles‘;
class Demo extends Component {
    constructor(props) {
        super(props);

        this.state = {
            data:‘var a = {}‘
        };
    }
    componentDidMount(){
        const {code, warnings} = lebab.transform(this.state.data,
            [‘let‘,‘class‘, ‘arrow‘,‘template‘,‘default-param‘,‘destruct-param‘,‘includes‘,‘for-of‘,‘for-each‘,‘arg-rest‘,‘arg-spread‘,‘obj-method‘,‘commonjs‘,‘exponent‘,‘multi-var‘]
        );
        this.setState({data:code})
    }
    handleChange=(e)=>{
        const {code, warnings} = lebab.transform(e.target.value,
            [‘let‘,‘class‘, ‘arrow‘,‘template‘,‘default-param‘,‘destruct-param‘,‘includes‘,‘for-of‘,‘for-each‘,‘arg-rest‘,‘arg-spread‘,‘obj-method‘,‘commonjs‘,‘exponent‘,‘multi-var‘]
        );
        this.setState({data:code})
    };
    render() {
        return (
            <div>
                <div className="content">
                    <h3>输入</h3>
                    <Input onChange={this.handleChange} defaultValue="var a = {}" type="textarea" autosize={{minRows:8}} />
                </div>
                <div className="content">
                    <h3>输出</h3>
                    <SyntaxHighlighter language=‘javascript‘ style={docco}>{this.state.data}</SyntaxHighlighter>
                </div>
            </div>
        );
    }
}
export default Demo

  

react-es5转es6

标签:targe   return   size   ext   hang   export   obj   set   multi   

原文地址:http://www.cnblogs.com/leijuan/p/7841079.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!