Javascript 为什么React无法定义'；App&x27；组件？

我制作了包含index.js和App.js的简单Reactjs。App.js定义了应用组件。index.js导入App.js并使用App组件。但是，index.js收到“应用程序未定义错误”。这怎么可能

index.js：

import React from "react"
import '../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>
  )}
}

从“React”导入React
导入“../components/App.js”；
导出默认类Home扩展React.Component{
render（）{
返回(
欢迎来到东华网

由盖茨比提供动力

)}
}

它导入App.js：

/*global kakao*/

import React, { Component } from 'react';
import '../css/App.css';

class App extends Component {

    componentDidMount() {
        const script = document.createElement('script');
        script.async = true;
        script.src = "https://dapi.kakao.com/v2/maps/sdk.js?appkey=ee494d4410cf578c0566203d2f487eb9";
        document.head.appendChild(script);

        script.onload = () => {
            kakao.maps.load(() => {
                let el = document.getElementById('map');
                let map = new kakao.maps.Map(el, {
                    center: new kakao.maps.Coords(523951.25, 1085073.75)
                });
            });
        };
    }

    render() {
        return (
            <div className="App" id="map"></div>
        );
    }
}

export default App;

/*全球卡考*/
从“React”导入React，{Component}；
导入“../css/App.css”；
类应用程序扩展组件{
componentDidMount（）{
const script=document.createElement（'script'）；
script.async=true；
script.src=”https://dapi.kakao.com/v2/maps/sdk.js?appkey=ee494d4410cf578c0566203d2f487eb9";
document.head.appendChild（脚本）；
script.onload=（）=>{
kakao.maps.load（（）=>{
设el=document.getElementById（'map'）；
让map=new kakao.maps.map（el{
中心：新卡考。地图。坐标（523951.251085073.75）
});
});
};
}
render（）{
返回(
);
}
}
导出默认应用程序；

在开发过程中会出现以下错误：

12:8未定义错误“应用程序”/jsx无未定义

据我所知，导入的App.js不应该定义App吗？为什么它没有定义

谢谢。

这一行：

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

…实际上并不导入任何内容，它只是运行

App.js

中的代码。要导入默认导出，请显式执行以下操作：

import App from '../components/App.js';
//     ^^^^^^^^−−−−−−−−−−−−−−−−−−−−−−−−−−−

---

您现在可能想知道：“为什么导入

App.js

并运行其代码不自动创建

App

？”因为模块不会创建全局变量（除非您特意这样做），并且没有自动导入。模块的一个关键方面是明确定义模块之间的链接。这样做的一个好处是，当您使用一个由单个模块导出的具有大量功能的库时，浏览器（或捆绑包）可以对其进行树震动—只保留您实际使用的部分，而丢弃其余部分（当它震动树时掉下来的枯木）.

感谢您包含导致问题的代码…而不包括其他所有内容。人们常常走这条路或那条路-以上所说的完全正确。谢谢。我很担心，因为问题太简单了。谢谢！这么快的反应。