React项目App组件未定义报错原因？我的代码为何触发该错误？

嗨，这个问题其实就是导入语法的小疏忽导致的，我来给你捋清楚：

你在index.js里的导入语句是这样的：

import '../components/App.js';

这种写法只是加载了App.js文件，但并没有把文件里默认导出的App组件绑定到当前文件的作用域中——相当于你把文件拉进来了，但没给它起个名字让代码能找到它，所以React自然会报'App' is not defined的错误。

具体修改方法 #

把index.js里的导入语句改成默认导入的形式，给导出的组件指定一个名称（这里就用App正好对应组件名）：

import React from "react"
// 改成下面这行，明确导入默认导出的App组件
import App from '../components/App.js';

export default class Home extends React.Component {
  render() {
    return (
      <div>
        <p>Welcome to donghwankim.com!</p>
        <p>Powered by Gatsby</p>
        <App /> {/* 现在就能正常识别了 */}
      </div>
    )}
}

补充说明：ES6模块的两种导入导出对应关系 #

你的App.js用的是默认导出（export default App;），这种导出方式在导入时需要用import [名称] from '文件路径'的语法；如果是命名导出（比如export class App extends Component {...}），才需要用import { App } from '文件路径'的解构导入语法。

修改之后再运行项目，这个错误应该就消失啦！

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