Question

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

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

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

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>
      )
  }

}

Answer 1

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

如果使用default导出，则可以像使用任何命名变量一样导入它，因为它是分配给它的内容：

const foo = 'FOO';
export default foo;

import otherFoo from '/the/file';

请注意我不使用curlies，并使用我想要的任何名称定义它。

现在，如果您导出多个没有默认值的东西：

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

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

现在您看到您必须在文件中使用其声明的名称导入它们并使用curlies。如果要分配给其他变量，可以始终使用as表示法。

Answer 2

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

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

无法在reactjs中导入模块

2 个答案: