Почему React не определяет компонент «Приложение»?

Question

Я сделал простой Reactjs с индексом js и App. js. App. js определяет компонент приложения. index. js импортирует App. js и использует компонент App. Однако index. js получает сообщение «App is undefined error». Как это может быть?

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>
  )}
}

Он импортирует приложение. 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;

и выдает следующую ошибку во время разработка:

12: 8 ошибка «Приложение» не определено response / jsx-no-undef

Из того, что я узнал, не следует импортировать приложение. js определить приложение? Почему не определено?

Спасибо.

Answer 1

Эта строка:

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

... на самом деле ничего не импортирует, она просто запускает код в App.js. Чтобы импортировать экспорт по умолчанию, вы делаете это явно:

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

Теперь вы можете спросить: «Но почему импорт App.js и запуск его кода не создает App автоматически?» Поскольку модули не создают глобальные объекты (если только вы go не стараетесь сделать это)., И нет автоматического c импорта. Одним из ключевых аспектов модулей является то, что вы явно определяете связи между ними. Одно из преимуществ этого заключается в том, что когда вы используете библиотеку с большим количеством функций, экспортируемых одним модулем, браузер (или ваш сборщик) может встряхнуть дерево, сохранив только те части, которые вы действительно используете. , а остальное отбросить (мертвое дерево, выпавшее при сотрясении дерева).