要关闭此警告,您可以添加评论
/* 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()