如何摆脱 React 中的 import/no-anonymous-default-export 警告?

Posted

技术标签:

【中文标题】如何摆脱 React 中的 import/no-anonymous-default-export 警告?【英文标题】:How can I get rid of the warning import/no-anonymous-default-export in React? 【发布时间】:2022-01-12 23:04:54 【问题描述】:

我在控制台中收到警告:“在导出为模块默认导入/no-anonymous-default-export 之前将对象分配给变量。”

这来自我的 .js 函数,它默认导出多个函数。我不知道如何摆脱,同时仍然能够将几个函数导出为默认值并保持代码简单,如下所示。

function init() 

function log(error) 
  console.error(error);


export default 
  init,
  log,
;
 

我可以把文件写成:

export default function init() 

export function log(error) 
  console.error(error);

是否有需要更改的设置,我可以做些什么?

【问题讨论】:

【参考方案1】:

它告诉您在导出之前为要导出的对象指定一个名称,以使所使用的名称更有可能在整个代码库中保持一致。例如,改为:

function init() 

function log(error) 
  console.error(error);


const logger = 
  init,
  log,
;
export default logger;

(给它起任何在上下文中最有意义的名称 - logger 只是一个例子)

但是,如果您要导出多个内容,则使用命名导出会更有意义 IMO。另一种选择是:

export function init() 

export function log(error) 
  console.error(error);

然后将它们导入为:

import  init, log  from './foo.js';

【讨论】:

为什么它很重要?在标准 Web 开发的情况下,为什么我应该遵循这条规则?我不记得有任何未命名的默认导出出现问题的情况。 @Velidan 它可能导致的唯一问题是可维护性。如果正确实施代码的逻辑,无论是否为默认导出指定名称,都将起作用。预先将默认导出放入变量中将强制您为其命名,从而为模块的使用者提供您建议调用导入的约定。没有任何提示,这些名称很容易变得非常不一致。 myHttpLibraryMyHttpLibraryMyHTTPLibrary 等。无意的不一致是编程中错误的常见原因。没什么大不了的,但这就是为什么有一个 lint 规则。 我明白了,感谢您的澄清,但老实说,我们通常在某些文件夹索引文件或模块本身中使用“桶”或默认导出。他们每个人都有一个名字。例如/formik/index.ts 正在导出。我们肯定知道它是一个 formik 包。或者/some-folder/Formik.tsx - 我们再次知道它是一个formik 包,因为我们导入它并看到它的确切名称。如果我错了,请纠正我。我只是想了解这条规则的原因 @Velidan 有一个确切的名称来表明您正在导入的内容会更好一些。 /formik/index.ts 可能还不够 - import myFormikPackageimport theIndexFormikPackage? formik? Formik?不完全清楚它应该是什么。除非文件名或(如果 index.js)文件夹名称始终与导出完全匹配,包括大小写,那很好 - 这就是我在使用默认导出时所做的。但从风格的角度来看,这有点难以实施。意外地不一致并不难。这就是我更喜欢命名导出的原因之一。 @CertainPerformance,感谢您的详细解释。我明白你的立场【参考方案2】:

将数据放入变量中,然后默认导出。

//示例

const data = [
  
    id: 1,
    name: 'Bertie Yates',
    age: 29,
    image:
      'https://res.cloudinary.com/diqqf3eq2/image/upload/v1595959131/person-2_ipcjws.jpg',
  ,

  
    id: 3,
    name: 'Larry Little',
    age: 36,
    image:
      'https://res.cloudinary.com/diqqf3eq2/image/upload/v1586883423/person-4_t9nxjt.jpg',
  ,
  
    id: 4,
    name: 'Sean Walsh',
    age: 34,
    image:
      'https://res.cloudinary.com/diqqf3eq2/image/upload/v1586883417/person-3_ipa0mj.jpg',
  ,
]
export default data

【讨论】:

您能否发布您遇到的确切警告以及触发方式?

以上是关于如何摆脱 React 中的 import/no-anonymous-default-export 警告?的主要内容,如果未能解决你的问题,请参考以下文章

反应.js |如何摆脱 Codesandbox 中的跨域错误

在 React 中使用链接组件时如何摆脱样式

如何摆脱这个 - 消息:'你没有订阅这个 API。'。?

覆盖 MuiContainer 类时如何摆脱 Typescript 类型错误?

react-native 中的 BottomTabNavigator 上方的白线

摆脱顶部标签的边框(反应导航)