在反应中不能扩展类组件，其他一切正常工作

Question

不能扩展类组件，其他所有的东西如箭头函数都能正常工作。

我正在创建一个简单的应用程序，其中有一些组件.我已经创建了一些组件作为函数，它工作得很好，但当我试图通过扩展类创建一个组件，它失败了。我已经尝试了许多事情，但似乎没有为我工作。我是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

你有一个排版错误，当你试图导入 {component} 从反应。需要以大写字母开头的字符

import React,{ Component } from 'react';

你可以用任何你喜欢的名称来命名默认的导入，但在 {} 需要使用完全相同的名称，并被称为命名的进口。

Answer 2

你的Component类导入不正确。您需要导入 Component 而不是 component

import React,{ Component } from 'react';

class App extends Component {
  ...
}