正文从这开始~

总览

当我们尝试使用默认导出来导出一个匿名函数时,会导致"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单行注释放过该行代码。

React报错之Unexpected default export of anonymous function的更多相关文章

  1. el-table-column v-if条件渲染报错h.$scopedSlots.default is not a function

    我们在实际项目中经常会遇到el-table-column条件渲染出现报错的情况 报错内容: h.$scopedSlots.default is not a function 究其原因,是因为表格是el ...

  2. react 报错的堆栈处理

    react报错 Warning: You cannot PUSH the same path using hash history 在Link上使用replace 原文地址https://reactt ...

  3. mysql创建表时,设置timestamp DEFAULT NULL报错1067 - Invalid default value for 'updated_at'

    问题背景: 线上的linux服务器上的mysql服务器中导出数据库的结构.想要在本地创建一个测试版本 导出后再本地mysql上运行却报错   1067 - Invalid default value ...

  4. 浏览器报错:unexpected end of input 解决方法

    直接上报错代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...

  5. webpack 打包压缩 ES6文件报错UglifyJs + Unexpected token punc ((); 或者 Unexpected token: operator (>)

    webpack 打包压缩 ES6文件报错UglifyJs + Unexpected token punc (();  或者 Unexpected token: operator (>) 解决方案 ...

  6. JS请求报错:Unexpected token T in JSON at position 0

    <?php /* 最近做一个ajax validate表单验证提交的代码,在ajax提交的时候 JS请求报错:Unexpected token T in JSON at position 0 描 ...

  7. python3+selenium使用浏览器IE的时候,无法打开IE浏览器,老是报错: Unexpected error launching Internet Explorer. Protected Mode settings are not the same for all zones

    python3+selenium使用浏览器IE的时候,老是报错: Unexpected error launching Internet Explorer. Protected Mode settin ...

  8. npm install 报错 error Unexpected end of JSON input while parsing near '...sShrinkwrap":false,"d' 解决办法

    npm install 报错 : error Unexpected end of JSON input while parsing near '...sShrinkwrap":false,& ...

  9. 解决vue不相关组件之间的数据传递----vuex的学习笔记,解决报错this.$store.commit is not a function

    Vue的项目中,如果项目简单, 父子组件之间的数据传递可以使用  props 或者 $emit 等方式 进行传递 但是如果是大中型项目中,很多时候都需要在不相关的平行组件之间传递数据,并且很多数据需要 ...

随机推荐

  1. c++ 超大整数除法 高精度除法

    c++ 超大整数除法 高精度除法 解题思路 计算a/b,其中a为大整数,b为普通整数,商为c,余数为r. 根据手算除法的规则,上一步的余数记为r,则本次计算的被除数为t=r*10+被除数的本位数值a[ ...

  2. 一文掌握软件安全必备技术 SAST

    上一篇文章中,我们讨论了软件供应链的概念并了解到近年来软件供应链安全事件层出不穷.为了保障软件供应链安全,我们需要了解网络安全领域中的一些主要技术.本篇文章将介绍其中一个重要技术--SAST. 当开发 ...

  3. Java实用类(五) -Math类和指定范围的随机数

    1.Math类 java.lang.Math类提供了常用的数学运算方法和两个静态常量E(自然对数的底数) 和PI(圆周率) // 绝对值 System.out.println(Math.abs(-3. ...

  4. 【RPA之家转载】苏桦 华为RPA 企业财务实践:RPA与AI结合,实现百万级票据、合同处理自动化

    [RPA之家转载]苏桦 华为RPA 企业财务实践:RPA与AI结合,实现百万级票据.合同处理自动化 看到大会的主题,说每一位开发者都了不起,说白了我也非常的感触,因为我自己本身也是一个开发者,我从01 ...

  5. Flink1.13.1源码解析-Application on yarn(一)

    本篇文章讲述 Flink Application On Yarn 提交模式下,从命令提交到 AM 容器创建 1.脚本入口 flink run-application -t yarn-applicati ...

  6. 单片机 MCU 固件打包脚本软件

    ​ 1 前言 开发完 MCU 软件后,通常都会生成 hex 文件或者 bin 文件,用来做固件烧录或者升级,如果用来做产品开发,就涉及到固件版本的问题,初学者通常采用固件文件重命名来区分版本. 如果需 ...

  7. linux下怎样在某个文件里面查找一个字符串?

    方法一: grep命令 举个栗子:我想要在redis.conf中查询我设置的redis密码,执行下面代码 grep "require" redis.conf #grep " ...

  8. c# 通过反射,字符串 转换 类

    eg:已经知道字符串 "userInfo"是一个表名,并且在代码中也有自己的userInfo类,如何把这个字符串"userInfo" 转换成类, "u ...

  9. 抓到 Netty 一个 Bug,顺带来透彻地聊一下 Netty 是如何高效接收网络连接的

    本系列Netty源码解析文章基于 4.1.56.Final版本 对于一个高性能网络通讯框架来说,最最重要也是最核心的工作就是如何高效的接收客户端连接,这就好比我们开了一个饭店,那么迎接客人就是饭店最重 ...

  10. nw.js的cookie操作

    在实战中,我遇到nw.js cookie一个奇怪的现象. 当我写入cookie(非httponly)后,关闭nw.js.然后再打开nw.js发现cookie没有写入成功.经过摸索,发现 nw.js的c ...