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';

当您使用import 'module'它时,只需将模块作为脚本运行.当您尝试将副作用引入全局命名空间时,这非常有用,例如,旧版/不支持的浏览器的polyfill更新功能.

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

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

Answer 2

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

Answer 3

这偶尔发生在我身上，通常只是一个简单的疏忽。只需注意细节，简单的错字等即可。例如，在复制/粘贴导入语句时，如下所示：

Answer 4

您必须通过明确给出类名来告诉它要导入哪个组件.在您的情况下,它是Map

import Map from './Map';

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

Answer 5

在map.jsx或map.js文件中，如果您默认导出为：

export default MapComponent;

然后你可以像这样导入它

import MapComponent from './map'

但如果你不将其导出为默认值，就像这里的这个一样

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

您需要在花括号内导入，例如

import { MapComponent } from './map'

**在这里我们解决您的问题：**
有时在我们的项目中（我大部分时间都在使用 React），我们需要在 javascript 文件中导入样式才能使用它。在这种情况下，我们可以使用该语法，因为我们有像 Webpack 这样的捆绑程序来处理它，然后，当我们想要捆绑我们的应用程序时，Webpack 将提取我们的 CSS 文件并将其放在单独的文件中（例如）app.css 文件。在这些情况下，我们可以使用这样的语法将 CSS 文件导入到 javascript 模块中。

像下面这样：

import './css/app.css'

如果您使用 sass，您所需要做的就是将 sass 加载器与 webpack 一起使用！

Answer 6

导入任何模块的语法是

import {  } from "module";

或者

import module-name from "module";

出错前（带小“c”的cakeContainer）

修复后