react-es5转es6

Posted 2020-10-14 一朵梨花压海棠 18802686535

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