我正在使用create-react-app
并遇到此问题,我得到Home does not contain an export named Home
。
以下是我设置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;
现在我的layouts
文件夹中有Home.js
文件。设置如下。
import React, { Component } from 'react';
class Home extends Component{
render(){
return(
<p className="App-intro">
Hello Man
</p>
)
}
}
export default Home;
正如您所看到的,我正在导出Home
组件,但我在控制台中收到错误,说明了这一点。
发生了什么事?
答案 0 :(得分:203)
错误告诉您导入错误。您现在拥有的代码:
import { Home } from './layouts/Home';
不正确,因为您要导出为默认导出,而不是导出。检查这一行:
export default Home;
您将导出为默认,而不是名称。因此,像这样导入Home
:
import Home from './layouts/Home';
答案 1 :(得分:9)
使用
import Home from './layouts/Home'
而不是
import { Home } from './layouts/Home'
从主页
中删除{}
答案 2 :(得分:1)
在这种情况下,您混合了默认导出和命名导出。
在处理named
导出时,如果尝试导入它们,则应使用大括号,如下所示,
import { Home } from './layouts/Home'; // if the Home is a named export
在您的情况下,房屋已导出为默认房屋。当您不指定特定代码段的特定名称时,将从模块中导入的代码。导入并忽略花括号时,它将在您要从中导入模块的默认导出中查找。因此,您的导入应该是
import Home from './layouts/Home'; // if the Home is a default export
一些参考的外观:
答案 3 :(得分:1)
我们也可以使用
import { Home } from './layouts/Home';
在类关键字之前使用导出关键字。
export class Home extends React.Component{
render(){
........
}
}
默认
import Home from './layouts/Home';
默认导出类别
export default class Home extends React.Component{
render(){
........
}
}
两种情况都不需要写
export default Home;
下课后。
答案 4 :(得分:0)
您可以使用两种方法来解决此问题,第一种,我认为最好的方法是用下面的一种替换代码的导入段:
import Home from './layouts/Home'
或导出没有默认值的组件,该组件称为“导出”,如下所示
import React, { Component } from 'react';
class Home extends Component{
render(){
return(
<p className="App-intro">
Hello Man
</p>
)
}
}
export {Home};
答案 5 :(得分:0)
我只是遇到了此错误消息(升级到nextjs 9后,一些已转译的导入开始出现此错误)。我设法使用如下语法修复了它们:
import * as Home from './layouts/Home';
答案 6 :(得分:0)
将export { Home };
放在Home.js文件的末尾
答案 7 :(得分:-1)
您在
中留有空格<Home />
标签。删除空格并使其为
<Home/>
。显然,除非您在组件中传递道具,否则React不会这样。
答案 8 :(得分:-1)
这是解决方案:
export default Home;