快捷導(dǎo)航

解決React報(bào)錯(cuò)Unexpected default export of anonymous function

更新時(shí)間：2022年12月02日 11:03:55 作者：Borislav Hadzhiev

這篇文章主要為大家介紹了React報(bào)錯(cuò)Unexpected default export of anonymous function解決方法，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

總覽

當(dāng)我們嘗試使用默認(rèn)導(dǎo)出來導(dǎo)出一個(gè)匿名函數(shù)時(shí)，會(huì)導(dǎo)致"Unexpected default export of anonymous function"警告。為了解決該錯(cuò)誤，在導(dǎo)出函數(shù)之前，為函數(shù)賦予一個(gè)名稱。

這里有個(gè)例子來展示警告是如何發(fā)生的。

// 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>;
}

上述代碼的問題在于，我們使用默認(rèn)導(dǎo)出來導(dǎo)出一個(gè)匿名函數(shù)。

命名

為了解決該錯(cuò)誤，在導(dǎo)出函數(shù)之前，為函數(shù)賦予一個(gè)名稱。

// Header.js
// ??? give name to function that's being exported
export default function Header() {
  return <h1>hello world</h1>;
}

很重要：如果你要導(dǎo)出一個(gè)變量（或一個(gè)箭頭函數(shù)）來作為默認(rèn)導(dǎo)出，你必須在一行中聲明它，在下一行中導(dǎo)出它。你不能在同一行中聲明和默認(rèn)導(dǎo)出一個(gè)變量。

// Header.js
const Header = () => {
  return <h1>hello world</h1>;
};
export default Header;

現(xiàn)在你仍然能夠使用默認(rèn)導(dǎo)入來導(dǎo)入函數(shù)。

// App.js
import Header from './Header';
const App = () => (
  <div>
    <Header />
  </div>
);
export default App;

這種方法鼓勵(lì)在導(dǎo)出函數(shù)和導(dǎo)入函數(shù)時(shí)重復(fù)使用同一個(gè)標(biāo)識(shí)符。

默認(rèn)情況下，eslint規(guī)則會(huì)警告我們所有類型的匿名默認(rèn)導(dǎo)出，例如數(shù)組、函數(shù)、類、對(duì)象等等。

注釋單行規(guī)則

如果你想禁用單行的規(guī)則，你可以使用注釋。

// Header.js
// eslint-disable-next-line import/no-anonymous-default-export
export default function () {
  return <h1>hello world</h1>;
}

注釋應(yīng)該放在帶有匿名默認(rèn)導(dǎo)出的代碼的正上方。

或者，你可以在.eslintrc文件中，更新import/no-anonymous-default-export應(yīng)該檢查的內(nèi)容。

Github倉庫的選項(xiàng)部分展示了該規(guī)則的完整默認(rèn)配置，你可以在你的.eslintrc文件的規(guī)則對(duì)象中進(jìn)行調(diào)整。

總結(jié)

為了解決該警告，要么為默認(rèn)導(dǎo)出函數(shù)進(jìn)行命名，要么使用eslint單行注釋放過該行代碼。

翻譯原文鏈接：bobbyhadz.com/blog/react-…

以上就是解決React報(bào)錯(cuò)Unexpected default export of anonymous function的詳細(xì)內(nèi)容，更多關(guān)于React報(bào)錯(cuò)export function的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: