关于react.js: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 单行正文放过该行代码。