React函数组件转类组件render行报Missing semicolon错误如何修复

报错原因 #

• render是类组件的内置方法，必须定义在类的内部。你的代码在constructor执行结束后就提前写了}闭合了App类，把render方法放到了类外部，不符合JS语法规范，所以触发语法报错
• 额外问题：你没有从react包中导入Component，继承时会触发未定义错误

修复方案 #

1. 修改首行导入语句，引入Component
2. 删除constructor结束后多余的类闭合花括号，把render方法移到App类内部，最后在render结束后再闭合类

import React, { Component } from 'react'

import Navigation from './components/Navigation/Navigation'
import LogIn from './components/LogIn/LogIn'
import Converter from './components/Converter/Converter'

import './App.css'
import 'bootstrap/dist/css/bootstrap.min.css'

class App extends Component {
  constructor() {
   super();
   this.state = {}
  }

  render () {
    return (
      <div className='App'>
        <Navigation />
        <LogIn />
        <Converter />
     </div>
   );
 }
}

export default App

内容的提问来源于stack exchange，提问作者Jungleyes