React运行报错ReferenceError: Component is not defined如何解决？

错误原因 #

ReferenceError: Component is not defined错误的核心是当前代码作用域内没有可访问的Component变量，结合你提供的代码，常见触发场景有2种：

• 你项目内其他类组件文件直接使用了class 组件名 extends Component写法，既没有从react包单独引入Component，也没有通过React.Component挂载到已引入的React对象上调用
• 你错误删除了文件顶部的import React from 'react'语句，导致你代码中用到的React.Component里的React变量也未定义

修复方案 #

方案1：沿用现有代码的写法规范 #

确保所有类组件都采用React.Component写法，同时所有用到类组件的文件顶部保留import React from 'react'引入即可，你贴出的App.js代码本身的写法符合该规范，不需要修改。

import React from 'react';
// 其他引入...

class App extends React.Component {
  // 组件逻辑保持不变
}

方案2：解构引入Component简化写法 #

如果你不想每次都写React.前缀，可以从react包中解构导出Component变量直接使用：

// 顶部引入改为解构写法
import React, { Component } from 'react';
// 其他引入...

class App extends Component {
  // 组件逻辑不需要做任何改动
}

额外注意事项 #

如果你的项目使用React 17及以上版本，默认开启了自动JSX转换，纯函数组件可以省略import React from 'react'语句，但只要代码中用到了React.Component、React.useState这类挂载在React对象上的API，就必须保留React的引入语句，否则也会触发同类变量未定义错误。

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