解决React报错Unexpected default export of anonymous function
更新时间：2022年12月02日 11:03:55 作者：Borislav Hadzhiev
这篇文章主要为大家介绍了React报错Unexpected default export of anonymous function解决方法，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
总览
当我们尝试使用默认导出来导出一个匿名函数时，会导致"Unexpected default export of anonymous function"警告。为了解决该错误，在导出函数之前，为函数赋予一个名称。
这里有个例子来展示警告是如何发生的。
// Header.js
// 👇️ default export for anonymous function
// ⛔️ Unexpected default export of anonymous function
// eslint import/no-anonymous-default-export
export default function () {
return <h1>hello world</h1>;
}
上述代码的问题在于，我们使用默认导出来导出一个匿名函数。
命名
为了解决该错误，在导出函数之前，为函数赋予一个名称。
// Header.js
// 👇️ give name to function that's being exported
export default function Header() {
return <h1>hello world</h1>;
}
很重要：如果你要导出一个变量（或一个箭头函数）来作为默认导出，你必须在一行中声明它，在下一行中导出它。你不能在同一行中声明和默认导出一个变量。
// Header.js
const Header = () => {
return <h1>hello world</h1>;
};
export default Header;
现在你仍然能够使用默认导入来导入函数。
// App.js
import Header from './Header';
const App = () => (
<div>
<Header />
</div>
);
export default App;
这种方法鼓励在导出函数和导入函数时重复使用同一个标识符。
默认情况下，eslint规则会警告我们所有类型的匿名默认导出，例如数组、函数、类、对象等等。
注释单行规则
如果你想禁用单行的规则，你可以使用注释。
// Header.js
// eslint-disable-next-line import/no-anonymous-default-export
export default function () {
return <h1>hello world</h1>;
}
注释应该放在带有匿名默认导出的代码的正上方。
或者，你可以在.eslintrc文件中，更新import/no-anonymous-default-export应该检查的内容。
Github仓库的选项部分展示了该规则的完整默认配置，你可以在你的.eslintrc文件的规则对象中进行调整。
总结
为了解决该警告，要么为默认导出函数进行命名，要么使用eslint单行注释放过该行代码。
翻译原文链接：bobbyhadz.com/blog/react-…
以上就是解决React报错Unexpected default export of anonymous function的详细内容，更多关于React报错export function的资料请关注脚本之家其它相关文章！
相关文章
这篇文章主要为大家介绍了React 中的 JS 报错及容错方案详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2023-08-08
这篇文章主要为大家介绍了React不能将useMemo设置为默认方法原因详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪<BR>2022-07-07
这篇文章主要为大家介绍了React实现多个场景下鼠标跟随提示框详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-09-09
这篇文章主要为大家详细介绍了React实现歌词滚动效果(跟随音乐播放使劲按滚动),文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下2024-02-02
这篇文章主要介绍了React和Vue的props验证,本文通过示例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2022-08-08
React useEffect不支持async function示例分析
这篇文章主要为大家介绍了React useEffect不支持async function示例分析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-07-07
文章介绍了AntDesign组件库,它是基于AntDesign设计体系的ReactUI组件库,主要用于研发企业级中后台产品,文章详细讲解了如何下载和按需引入antd组件库,并通过一个小案例展示了如何使用antd进行布局和改造,最后,文章提醒大家在使用过程中可以参考官网的属性介绍2024-11-11
关于 Refs ，React 官网讲解的对于新手来说不太友好，还是自己一字一句解读后并以代码验证的方式后真正理解的.2021-05-05
这篇文章主要介绍了React引入css的几种方式及应用小结,操作styled组件的样式属性,可在组件标签上定义属性、也可以通过attrs定义属性,本文通过实例代码介绍的非常详细,需要的朋友可以参考下2024-03-03
这篇文章主要为大家介绍了React ISR如何实现Demo详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-07-07
最新评论