Javascript React JS 错误：未定义 react/jsx-no-undef
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/44441734/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
React JS Error: is not defined react/jsx-no-undef
提问by Sarvesh Kulkarni
I'm developing a map functionality using ReactJS, My app.jsfile is:
我正在使用 开发地图功能ReactJS，我的app.js文件是：
import React, { Component } from 'react';
import './Map';
class App extends Component {
render() {
return (
<div className="App">
<Map/>
</div>
);
}
}
export default App;
The error is:
错误是：
./src/App.js
Line 8: 'Map' is not defined react/jsx-no-undef
Search for the keywords to learn more about each error.
How can I solve this problem?
我怎么解决这个问题？
采纳答案by shawon191
Try using
尝试使用
import Map from './Map';
When you use import 'module'it will just run the module as a script. This is useful when you are trying to introduce side-effects into global namespace, e. g. polyfill newer features for older/unsupported browsers.
当您使用import 'module'它时，它只会将模块作为脚本运行。当您尝试将副作用引入全局命名空间时，这很有用，例如，为旧的/不受支持的浏览器填充新功能。
ES6 modules are allowed to define default exports and regular exports. When you use the syntax import defaultExport from 'module'it will import the default export of that module with alias defaultExport.
ES6 模块允许定义默认导出和常规导出。当您使用该语法时import defaultExport from 'module'，它将使用别名 defaultExport 导入该模块的默认导出。
For further reading on ES6 import - https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import
有关 ES6 导入的进一步阅读 - https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import
回答by Demon
you should do import Map from './Map'React is just telling you it doesn't know where variable you are importing is.
你应该做import Map from './Map'React 只是告诉你它不知道你要导入的变量在哪里。
回答by Mirza Sisic
This happens to me occasionally, usually it's just a simple oversight. Just pay attention to details, simple typos, etc. For example when copy/pasting import statements, like this:
这种情况偶尔会发生在我身上，通常只是一个简单的疏忽。只需注意细节，简单的错别字等。例如复制/粘贴导入语句时，如下所示：
回答by Shahrukh Anwar
You have to tell it which component you want to import by explicitly giving the class name..in your case it's Map
你必须通过明确给出类名来告诉它你想要导入哪个组件......在你的情况下它是 Map
import Map from './Map';
class App extends Component{
/*your code here...*/
}
回答by Aravinth Raja
The Syntax for the importing any module is
导入任何模块的语法是
import { } from "module";
or
或者
import module-name from "module";
Before error (cakeContainer with small "c")
出错前（带小“c”的cakeContainer）
After Fix
修复后
回答by a_m_dev
in map.jsxor map.jsfile, if you exporting as default like:
在map.jsx或map.js文件中，如果您作为默认导出，如：
export default MapComponent;
then you can import it like
然后你可以像这样导入它
import MapComponent from './map'
but if you not export it as default like this one here
但如果你没有像这里那样将它导出为默认值
export const MapComponent = () => { ...whatever }
you need to import in inside curly braces like
您需要在大括号内导入，例如
import { MapComponent } from './map'
Here we get in to your problem:
在这里，我们进入您的问题：
sometimes in our project (most of the time that i work with react) we need to import our styles in out javascript files to use it. in such cases we can use that syntax , because in such cases , we have a blunder like webpack that that takes care of it, then later on , when we want to bundle our app, webpack is going to extract our css files and put it in a seperate (for example) app.css file. in that situations we can use such syntax to import our css files into our javascript modules.
有时在我们的项目中（大部分时间我使用 react）我们需要将我们的样式导入到 javascript 文件中才能使用它。在这种情况下，我们可以使用该语法，因为在这种情况下，我们有一个像 webpack 这样的错误来处理它，然后当我们想要捆绑我们的应用程序时，webpack 将提取我们的 css 文件并将其放入在单独的（例如） app.css 文件中。在这种情况下，我们可以使用这样的语法将我们的 css 文件导入到我们的 javascript 模块中。
like below:
像下面这样：
import './css/app.css'
if you are using sass all you need to do is just use sass loader with webpack!
如果您使用的是 sass，那么您只需将 sass 加载器与 webpack 一起使用即可！
回答by Muo sigma classes
should write like this -->
应该这样写-->
import Map from './map';
从'./map'导入地图；
- look in this Map should have first later is capital .(important note)
- inset the single 'just mention your file location correctly'.
- 看这张地图应该先有资本。（重要提示）
- 插入单个“只需正确提及您的文件位置”。
回答by Marco
Strangely enough, the reason for my failure was about the CamelCase that I was applying to the component name. MyComponentwas giving me this error but then I renamed it to Mycomponentand voila, it worked!!!
奇怪的是，我失败的原因是我在组件名称上应用了 CamelCase。MyComponent给了我这个错误，但后来我将它重命名为Mycomponent，瞧，它奏效了！！！
回答by santosh sutar
Here you have not specified class name to be imported from Map.js file. If Map is class exportable class name exist in the Map.js file, your code should be as follow.
这里您没有指定要从 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;
回答by x-rw
its very similar with nodejs
它与 nodejs 非常相似
var User= require('./Users');
in this case its React:
在这种情况下它的反应：
import User from './User'
right now you can use
现在你可以使用
return (
<Users></Users>
)
