Home不包含名为Home的导出

时间:2017-05-25 05:12:52

标签: javascript reactjs ecmascript-6 create-react-app

我正在使用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组件,但我在控制台中收到错误,说明了这一点。

enter image description here

发生了什么事?

9 个答案:

答案 0 :(得分:203)

错误告诉您导入错误。您现在拥有的代码:

import { Home } from './layouts/Home';

不正确,因为您要导出为默认导出,而不是导出。检查这一行:

export default Home;

您将导出为默认,而不是名称。因此,像这样导入Home

import Home from './layouts/Home';

注意没有花括号。进一步阅读importexport

答案 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)

这是解决方案:

  • 转到文件Home.js
  • 确保您在文件末尾像这样导出文件:
export default Home;