Javascript Home 不包含名为 Home 的导出
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/44172727/
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
Home does not contain an export named Home
提问by Shadid
I was working with create-react-appand came across this issue where I get Home does not contain an export named Home.
我正在处理create-react-app并遇到了这个问题，我得到了Home does not contain an export named Home.
Here's how I set up my App.jsfile:
这是我设置App.js文件的方法：
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import { Home } from './layouts/Home'
class App extends Component {
render() {
return (
<div className="App">
Hello
<Home />
</div>
)
}
}
export default App;
Now in my layoutsfolder I have the Home.jsfile. which is setup like following.
现在在我的layouts文件夹中我有这个Home.js文件。设置如下。
import React, { Component } from 'react';
class Home extends Component{
render(){
return(
<p className="App-intro">
Hello Man
</p>
)
}
}
export default Home;
As you can see I am exporting the Homecomponent but I get an error in my console saying this.
如您所见，我正在导出Home组件，但在控制台中出现错误提示。
What is going on?
到底是怎么回事？
回答by Andrew Li
The error is telling you that you are importing incorrectly. The code you have now:
该错误告诉您导入不正确。您现在拥有的代码：
import { Home } from './layouts/Home';
Is incorrect because you're exporting as the default export, not as a named export. Check this line:
不正确，因为您导出为默认导出，而不是命名导出。检查这一行：
export default Home;
You're exporting as default, not as a name. Thus, import Homelike this:
您导出为 default，而不是名称。因此，Home像这样导入：
import Home from './layouts/Home';
Notice there are no curly brackets. Further reading on importand export.
回答by Shekhar
Use
用
import Home from './layouts/Home'
rather than
而不是
import { Home } from './layouts/Home'
Remove {}from Home
删除{}从首页
回答by prime
This is a case where you mixed up defaultexports and namedexports.
在这种情况下，您将默认导出和命名导出混为一谈。
When dealing with the namedexports, if you try to import them you should use curly braces as below,
在处理named导出时，如果您尝试导入它们，则应使用如下花括号，
import { Home } from './layouts/Home'; // if the Home is a named export
In your case the Home was exported as a default one. This is the one that will get imported from the module, when you don't specify a certain name of a certain piece of code. When you import, and omit the curly braces, it will look for the default export in the module you're importing from. So your import should be,
在您的情况下，Home 被导出为默认值。当您没有指定某段代码的特定名称时，它将从模块中导入。当您导入并省略大括号时，它将在您从中导入的模块中查找默认导出。所以你的进口应该是，
import Home from './layouts/Home'; // if the Home is a default export
Some references to look :
一些参考资料：
回答by Mahdi
I just ran into this error message (after upgrading to nextjs 9 some transpiled imports started giving this error). I managed to fix them using syntax like this:
我刚遇到此错误消息（升级到 nextjs 9 后，一些转译的导入开始出现此错误）。我设法使用这样的语法修复它们：
import * as Home from './layouts/Home';
回答by Alimon Karim
We also can use
我们也可以使用
import { Home } from './layouts/Home';
using export keyword before class keyword.
在 class 关键字之前使用 export 关键字。
export class Home extends React.Component{
render(){
........
}
}
For default
默认情况下
import Home from './layouts/Home';
Default export class
默认导出类
export default class Home extends React.Component{
render(){
........
}
}
Both case don't need to write
两种情况都不需要写
export default Home;
after class.
下课以后。
回答by Ehsan Ahmadi
You can use two ways to resolve this problem, first way that i think it as best way is replace importing segment of your code with bellow one:
您可以使用两种方法来解决此问题，我认为最好的第一种方法是用以下代码替换导入代码段：
import Home from './layouts/Home'
or export your component without default which is called named export like this
或者在没有默认值的情况下导出您的组件，这称为命名导出，如下所示
import React, { Component } from 'react';
class Home extends Component{
render(){
return(
<p className="App-intro">
Hello Man
</p>
)
}
}
export {Home};
