React中的应用程序文件不能识别jsx语法

Question

这真的很奇怪。当应用程序是一个函数时，我的（App.js）文件可以很好地识别jsx语法，但是当我将它转换为一个类时，它根本无法识别jsx。

代码如下：

当App是一个函数时识别jsx

import logo from './logo.svg';
import './App.css';
import Counters from './components/counters';
import 'bootstrap/dist/css/bootstrap.css';

function App() {
  return ( <h1></h1>
  );
}

export default App;

但当我将其转换为类时,它不识别JSX：

import logo from './logo.svg';
import './App.css';
import Counters from './components/counters';
import 'bootstrap/dist/css/bootstrap.css';
import { Component } from 'react';

class App extends Component {
  return ( <h1></h1>
  );
}

export default App;

我正在学习一个教程，在教程中（应用程序）是一个类，它工作得很好。

任何帮助都将不胜感激。

Answer 1

当使用类组件时,return语句需要在render方法内部,如下所示：

import logo from './logo.svg';
import './App.css';
import Counters from './components/counters';
import 'bootstrap/dist/css/bootstrap.css';
import { Component } from 'react';

class App extends Component {

  render() {
    return (<h1></h1>);
  }
}

export default App;