33

嗨,我很难理解/让这个 eslint 错误随着我的 React 项目消失。

Prefer default export import/prefer-default-export

Helpers.js 错误指向:

export function getItems() {
  fetch('./data/data_arr.js')
  .then(results => results.json())
  .then(results => this.setState({ items: results }));
}

函数导入:

import { getItems } from '../helpers/helpers';

componentDidMount() {
    getItems.call(this);
}

我试过无济于事:

"rules": {
     "import/prefer-default-export": off,
     ...
}

我需要在函数中添加“默认”吗?export default function getItems() {...}

谢谢

4

3 回答 3

81
"rules": {
     "import/prefer-default-export": "off",
     ...
}

这个词off必须被引用。

于 2019-12-03T22:03:53.307 回答
28

要关闭此警告,您可以添加评论

/* eslint-disable import/prefer-default-export */

到要导出 getItems 的文件的最顶部。

请注意,Eslint 只是在这里给您一个样式警告 - 您的代码没有任何“错误”,特别是如果您打算将来从同一个文件中导出更多函数。

背景

export default如果它有用,这里是和之间的区别export

使用export default

在此示例中,文件myFile.js仅导出一位代码;一个名为 的函数myFunction

// myFile.js

function myFunction() {
    // do something
}

export default myFunction;

当您导入一个 . 的东西时export default,您可以随意调用它。所以你可以叫它同名,像这样:

// someOtherFile.js

import myFunction from './myFunction';

// ... now you can use myFunction by calling myFunction()

...或者您可以将其称为其他名称

// someOtherFile.js

import someDifferentName from './myFunction';

// ... now you can use myFunction by calling someDifferentName()

export default当您只从文件中导出一位代码时,通常最好使用它。每个文件只能有一个默认导出。关于它有助于 treeshaking 有一些争论,但这并不重要。实际上,当您将代码导入另一个文件时,它只是一种更好的语法。

export单独使用

如果您想从文件中导出多个代码(或计划在将来),您将单独使用export它。这有时被称为“命名导出”,因为您在导入时必须使用相同的名称。例如:

// myFile.js

function myFunction() {
    // do something
}

const someVariable = "Hello World"

export { 
    myFunction, 
    someVariable,
    // plus as many others as you like
    };

现在,当您导入命名导出时,您必须使用相同的名称,并使用解构语法:

// someOtherFile.js

import { myFunction } from './myFunction';

// ... now you can use myFunction by calling myFunction()

您可以导入多个内容:

// someOtherFile.js

import { myFunction, someVariable } from './myFunction';

// ... now you can use myFunction by calling myFunction()
// ... now you can use someVariable as someVariable

有时您可能需要在导入时使用不同的名称。如果您有两个具有相同名称的命名导出(来自两个不同的文件),则可能会发生这种情况。在这种情况下,您可以为命名导出使用别名:

// someOtherFile.js

import { myFunction as someDifferentName } from './myFunction';

// ... now you can use myFunction by calling someDifferentName()
于 2018-11-08T10:46:38.777 回答
4
"rules": {
     "import/prefer-default-export": 0,
     ...
}

使用 0 导入/首选默认导出问题

于 2020-10-03T14:06:29.153 回答