web-dev-qa-db-ja.com

React JSエラー：定義されていませんreact / jsx-no-undef

ReactJSを使用してマップ機能を開発しています。私のapp.jsファイルは次のとおりです。

import React, { Component } from 'react';
import './Map';
class App extends Component {
   render() {
     return (
         <div className="App">
            <Map/>
         </div>
     );
   }
}
export default App;

エラーは次のとおりです。

./src/App.js
Line 8:  'Map' is not defined  react/jsx-no-undef

Search for the keywords to learn more about each error.

この問題を解決するにはどうすればよいですか？

javascriptreactjs
22
Sarvesh Kulkarni

使用してみてください

import Map from './Map';

import 'module'を使用すると、モジュールがスクリプトとして実行されます。これは、グローバル名前空間に副作用を導入しようとしているときに役立ちます。 g。古い/サポートされていないブラウザの新しい機能をポリフィルします。

ES6モジュールでは、デフォルトのエクスポートと通常のエクスポートを定義できます。構文import defaultExport from 'module'を使用すると、エイリアスdefaultExportでそのモジュールのデフォルトエクスポートがインポートされます。

ES6インポートの詳細については、- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import

15
shawon191

import Map from './Map' Reactを実行する必要があります。これは、インポートする変数の場所がわからないことを伝えているだけです。

16
Demon

これはときどき起こりますが、通常は単純な見落としです。詳細、単純なタイプミスなどに注意してください。たとえば、次のようなimportステートメントをコピー/貼り付けする場合： enter image description here

5
Mirza Sisic

クラス名を明示的に指定して、インポートするコンポーネントを指定する必要があります。

import Map from './Map';

class App extends Component{
    /*your code here...*/
}
4
Shahrukh Anwar

奇妙なことに、私の失敗の理由は、コンポーネント名に適用したキャメルケースに関するものでした。 MyComponentからこのエラーが発生していましたが、名前をMycomponentに変更しました。

1
Marco

このように書く必要があります->

'./map'からマップをインポートします。

  1. このマップを見て、後で最初に大文字にする必要があります。（重要な注意）
  2. 単一の「ファイルの場所を正しく言及するだけ」を挿入します。
1
Muo sigma classes

map.jsxまたはmap.jsファイルで、デフォルトとしてエクスポートする場合：

export default MapComponent;

その後、次のようにインポートできます

import MapComponent from './map'

ただし、このようにデフォルトとしてエクスポートしない場合

export const MapComponent = () => { ...whatever }

次の中括弧の中にインポートする必要があります

import { MapComponent } from './map'


ここで問題に取り組みます。

時々私たちのプロジェクトでは（ほとんどの場合、私は反応して作業しています）、スタイルをJavaScriptファイルにインポートして使用する必要があります。そのような場合、その構文を使用できます。そのような場合、それを処理するwebpackのような失策があり、その後、アプリをバンドルするときにwebpackがcssファイルを抽出して配置するためです別の（たとえば）app.cssファイル内。そのような状況では、このような構文を使用してcssファイルをjavascriptモジュールにインポートできます。

以下のように：

import './css/app.css'

sassを使用している場合、webpackでsassローダーを使用するだけです！

1
a_m_dev