首页 > 其他 > 详细

react-es5转es6

时间:2017-11-15 22:37:44      阅读:339      评论:0      收藏:0      [点我收藏+]
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

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

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!