reactjs导入模块失败答案

【问题标题】：Failed to import a module in reactjsreactjs导入模块失败
【发布时间】：2016-04-12 03:28:05
【问题描述】：

我正在使用 reactjs 和 es6，我定义了一个 javascript，如下所示。

vendor.jsx:
export const VENDOR_LIST = [{
    vendor: []
}];

在另一个 javasript 文件中，我想导入这个文件，所以我使用了下面的代码。但是我总是在 componentDidMount() 方法中得到 VENDOR_LIST is undefined 错误。我的代码有什么问题？

import VENDOR_LIST from  '../data/vendor'

    export class VendorList extends React.Component{

  selectChanged(e){
    console.log('select changed ', e);
  }

  componentDidMount(){
    console.log('load vendor list data ',VENDOR_LIST);
  }

  render(){
    return (
      <select onChange={this.selectChanged}>
        <option value="A">A</option>
        <option value="B">A</option>
        <option value="-">Other</option>
      </select>
      )
  }

}

【问题讨论】：

标签： javascript reactjs ecmascript-6

【解决方案1】：

为了更好地解释 import 语句在 ES6 中的工作原理，简而言之，它与 export 在文件中的完成方式有关。

如果您使用default 导出，那么您可以像使用任何命名变量一样导入它，因为这是分配给它的对象：

const foo = 'FOO';
export default foo;

import otherFoo from '/the/file';

注意我是如何不使用卷曲的，我用任何我想要的名字来定义它。

现在，如果您在没有默认值的情况下导出多个内容：

export const foo = 'FOO';
export const bar = 'BAR';

import { foo, bar as otherBar } = from '/the/file';

现在您看到您必须使用它们在文件中声明的名称并使用卷曲来导入它们。如果您想分配给不同的变量，您始终可以使用 as 表示法。

【讨论】：

这是一个更好的答案，不过我们得让他做一些工作！给我点赞

【解决方案2】：

您需要了解 ES6 导入/导出。在你的代码中，试试这个：

import { VENDOR_LIST } from  '../data/vendor'

【讨论】：

很好用。为什么我需要在此添加 {}？导入类的时候没做。
我建议你看看这篇关于 ES6 模块的文章。简短的回答：在 vendor.jsx export default [{ vendor: [] }]; 中替换它