无法在反应中扩展 class 组件，其他一切正常

Question

无法扩展 class 组件，箭头函数等其他一切正常。

我正在创建一个简单的应用程序，它有一些 components.I 已经创建了一些组件作为函数并且它运行良好但是当我试图通过扩展 class 创建组件时它失败了。我尝试了很多东西，但 none 似乎对我有用。我是 React 的新手。

这是我正在尝试的代码运行:

import React,{ component } from 'react';
import CardList from './CardList';
import { robots } from './robots';
import SearchBox from './SearchBox';

class App extends component {
constructor() {
    super();
    this.state = {
        robots: robots,
        searchfield: ''
    }
}
    render(){
    return(
    <div className='tc'>
      <h1>RoboFriends</h1>
      <SearchBox />
      <CardList robots={this.state.robots} />
    </div>
    );
}
}

export default App;

我在浏览器中得到如下错误：

TypeError: Class extends value undefined is not a constructor or null
Module../src/App.js
C:/Users/Aku/Desktop/robofriends/src/App.js:6
  3 | import { robots } from './robots';
  4 | import SearchBox from './SearchBox';
  5 | 
> 6 | class App extends component {
  7 |   constructor() {
  8 |       super();
  9 |       this.state = {
View compiled


__webpack_require__
C:/Users/Aku/Desktop/robofriends/webpack/bootstrap:784
  781 | };
  782 | 
  783 | // Execute the module function
> 784 | modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId));
      | ^  785 | 
  786 | // Flag the module as loaded
  787 | module.l = true;
View compiled


fn
C:/Users/Aku/Desktop/robofriends/webpack/bootstrap:150
  147 |         );
  148 |         hotCurrentParents = [];
  149 |     }
> 150 |     return __webpack_require__(request);
      | ^  151 | };
  152 | var ObjectFactory = function ObjectFactory(name) {
  153 |     return {
View compiled


Module../src/index.js
http://localhost:3000/static/js/main.chunk.js:377:62
__webpack_require__
C:/Users/Aku/Desktop/robofriends/webpack/bootstrap:784
  781 | };
  782 | 
  783 | // Execute the module function
> 784 | modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId));
      | ^  785 | 
  786 | // Flag the module as loaded
  787 | module.l = true;
View compiled


fn
C:/Users/Aku/Desktop/robofriends/webpack/bootstrap:150
  147 |         );
  148 |         hotCurrentParents = [];
  149 |     }
> 150 |     return __webpack_require__(request);
      | ^  151 | };
  152 | var ObjectFactory = function ObjectFactory(name) {
  153 |     return {
View compiled


1
http://localhost:3000/static/js/main.chunk.js:586:18
__webpack_require__
C:/Users/Aku/Desktop/robofriends/webpack/bootstrap:784
  781 | };
  782 | 
  783 | // Execute the module function
> 784 | modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId));
      | ^  785 | 
  786 | // Flag the module as loaded
  787 | module.l = true;
View compiled


checkDeferredModules
C:/Users/Aku/Desktop/robofriends/webpack/bootstrap:45
  42 |  }
  43 |  if(fulfilled) {
  44 |      deferredModules.splice(i--, 1);
> 45 |      result = __webpack_require__(__webpack_require__.s = deferredModule[0]);
     | ^  46 |  }
  47 | }
  48 | 
View compiled


Array.webpackJsonpCallback [as push]
C:/Users/Aku/Desktop/robofriends/webpack/bootstrap:32
  29 |  deferredModules.push.apply(deferredModules, executeModules || []);
  30 | 
  31 |  // run deferred modules when all chunks ready
> 32 |  return checkDeferredModules();
     | ^  33 | };
  34 | function checkDeferredModules() {
  35 |  var result;
View compiled


(anonymous function)
http://localhost:3000/static/js/main.chunk.js:1:75
This screen is visible only in development. It will not appear if the app crashes in production.
Open your browser’s developer console to further inspect this error.  Click the 'X' or hit ESC to                           
dismiss this message.

注意：终端显示编译成功
我是 React 的新手，这对我有很大的帮助。谢谢

Answer 1

您的组件 class 导入不正确。您需要导入 Component 而不是 component

import React,{ Component } from 'react';

class App extends Component {
  ...
}

Answer 2

当您尝试从 React 导入 {component} 时出现错字。需要以大写字母开头

import React,{ Component } from 'react';

您可以使用任何您喜欢的名称来命名默认导入，但 {} 中的导入需要使用完全相同的名称并且称为命名导入

无法在反应中扩展 class 组件，其他一切正常

cannot extend class component in react , everything else works fine

javascript

reactjs

webpack

es6-class

react-component