为什么我的ES6导入/导出不起作用？

我试图导入我的班create-react-app为什么我的ES6导入/导出不起作用？

工作例如：

export default class HeaderView extends Component { 
    render() { 
     return (
      <div className="header-view"> 
       {this.props.children} 
      </div> 
     ); 
    } 
}

import HeaderView from './HeaderView'

但是当我做

export class HeaderView extends Component { }

然后

import { HeaderView } from './HeaderView'是undefined

我试过不同的方法，但都没有工作。最近我得到的是

export default { HeaderView }但随后

import HeaderView from './HeaderView'是Object { HeaderView:.. }和 import {HeaderView} from './HeaderView'是undefined

来源

2016-12-27 Lauri

奇怪的行为，你确定你的第二种方法？ –

您可以请显示文件夹结构+您导入HeaderView的文件到 – Ralph

呃..感谢拉尔夫提到的文件夹结构。我有我的HeaderView文件夹中的index.js，我导入/导出HeaderView.js ..我想我的问题在那里。 – Lauri

你忘记延长您的成分反应，还需要进行导入每个组件反应：

import React from "react"; 
export default class HeaderView extends React.Component { 
    render() { 
    return (
     <div className="header-view"> 
      {this.props.children} 
     </div> 
    ); 
    } 
}

Then

import HeaderView from './HeaderView.js'

应该工作。还要注意我添加文件扩展名.js或.jsx

我相信你只能导入一个组成部分，而不当其被添加为你安装到您的环境中库或外部文件中的文件扩展名。

import { HeaderView } from './HeaderView.js'

当它们是多个组件作为同一个文件内的对象时使用。

退房这个答案来解释进口： How to import part of object in ES6 modules

编辑：为了解决进口没有你需要的扩展已经配置的WebPack寻找默认情况下这些扩展。

来源

2016-12-27 16:44:32 DirtyRedz

OP已经说过第一个例子“正在工作”，所以我们可以假定'Component'被定义在某个地方。他们想知道为什么使用命名导出不起作用。 *“我相信，只有当您将其添加为您安装到环境中的库或外部文件时，才会导入没有文件扩展名的组件。”*如何处理取决于OP未说明的模块。 –

我只是在检查和文件扩展名艺术实际上如果你设置你的环境（packages.json）默认查找这些扩展名。没有你需要分配的扩展，Sry我的意思是Webpack不包，json – DirtyRedz

Webpack默认解析'.js'：https：//webpack.github.io/docs/configuration.html#resolve-extensions。另外，OP可能没有使用webpack。 –

由于DirtyRedz提到，请确保您包含导入从“反应”反应;从进口ReactDOM“反应-DOM”

此外，添加默认你的类组件例如：出口默认类Headerview扩展React.Component {..} 当您导入另一个文件中的组件，您不需要在{}内包含组件。祝你好运

来源

2016-12-27 22:27:11

为什么我的ES6导入/导出不起作用？

回答

相关问题