React JS Error：未定义react / jsx-no-undef

Question

我正在使用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.

我该如何解决这个问题？

Answer 1

你应该做import Map from './Map' React只是告诉你它不知道你要导入的变量在哪里。

Answer 2

尝试使用

import Map from './Map';

当您使用import 'module'时，它只会将模块作为脚本运行。当您尝试将副作用引入全局命名空间时，这很有用，例如： G。 polyfill较新的功能，适用于较旧/不受支持的浏览器。

允许ES6模块定义默认导出和常规导出。当您使用语法import defaultExport from 'module'时，它将使用别名defaultExport导入该模块的默认导出。

有关ES6导入的进一步阅读 - https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import

Answer 3

偶尔会发生这种情况，通常只是一个简单的疏忽。只需注意细节，简单的拼写错误等。例如，复制/粘贴import语句时，如下所示：

Answer 4

导入任何模块的语法为

import {  } from "module";

或

import module-name from "module";

错误之前（cakeContainer带有小“ c”）

修复后

Answer 5

你必须通过明确地给出类名来告诉它要导入哪个组件。在你的情况下它的地图

   @Query("SELECT * FROM objects WHERE obj_id IN :ids")
   List<Object> queryObjects(List<String> ids);

Answer 6

奇怪的是，我失败的原因是与我应用于组件名称的CamelCase有关。 MyComponent给了我这个错误，但后来我将其重命名为Mycomponent，瞧，它有效了！！

Answer 7

在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，则只需将sass loader与webpack一起使用！

Answer 8

应该这样写->

从“ ./map”导入地图；

1. 在此地图中查找应该首先具有大写字母。（重要说明）
2. 插入单个“仅正确提及您的文件位置”。

Answer 9

此处您尚未指定要从Map.js文件导入的类名。 如果Map.js文件中存在Map是可导出类的类名称，则您的代码应如下。

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

Answer 10

它与nodejs非常相似

var User= require('./Users');

在这种情况下是它的React：

import User from './User'

现在您可以使用

return (
      <Users></Users>
    )