解決React報錯Unexpected default export of anonymous function
總覽
當(dāng)我們嘗試使用默認(rèn)導(dǎo)出來導(dǎo)出一個匿名函數(shù)時，會導(dǎo)致"Unexpected default export of anonymous function"警告。為了解決該錯誤，在導(dǎo)出函數(shù)之前，為函數(shù)賦予一個名稱。
這里有個例子來展示警告是如何發(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)出一個匿名函數(shù)。
命名
為了解決該錯誤，在導(dǎo)出函數(shù)之前，為函數(shù)賦予一個名稱。
// Header.js
// ??? give name to function that's being exported
export default function Header() {
return <h1>hello world</h1>;
}
很重要：如果你要導(dǎo)出一個變量（或一個箭頭函數(shù)）來作為默認(rèn)導(dǎo)出，你必須在一行中聲明它，在下一行中導(dǎo)出它。你不能在同一行中聲明和默認(rèn)導(dǎo)出一個變量。
// 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;
這種方法鼓勵在導(dǎo)出函數(shù)和導(dǎo)入函數(shù)時重復(fù)使用同一個標(biāo)識符。
默認(rèn)情況下，eslint規(guī)則會警告我們所有類型的匿名默認(rèn)導(dǎo)出，例如數(shù)組、函數(shù)、類、對象等等。
注釋單行規(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ī)則對象中進(jìn)行調(diào)整。
總結(jié)
為了解決該警告，要么為默認(rèn)導(dǎo)出函數(shù)進(jìn)行命名，要么使用eslint單行注釋放過該行代碼。
翻譯原文鏈接：bobbyhadz.com/blog/react-…
以上就是解決React報錯Unexpected default export of anonymous function的詳細(xì)內(nèi)容，更多關(guān)于React報錯export function的資料請關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
這篇文章主要為大家介紹了React?中的?JS?報錯及容錯方案詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-08-08
React不能將useMemo設(shè)置為默認(rèn)方法原因詳解
這篇文章主要為大家介紹了React不能將useMemo設(shè)置為默認(rèn)方法原因詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪<BR>2022-07-07
React實(shí)現(xiàn)多個場景下鼠標(biāo)跟隨提示框詳解
這篇文章主要為大家介紹了React實(shí)現(xiàn)多個場景下鼠標(biāo)跟隨提示框詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-09-09
React實(shí)現(xiàn)歌詞滾動效果(跟隨音樂播放時間滾動)
這篇文章主要為大家詳細(xì)介紹了React實(shí)現(xiàn)歌詞滾動效果(跟隨音樂播放使勁按滾動),文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下2024-02-02
這篇文章主要介紹了React和Vue的props驗(yàn)證,本文通過示例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-08-08
React?useEffect不支持async?function示例分析
這篇文章主要為大家介紹了React?useEffect不支持async?function示例分析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-07-07
文章介紹了AntDesign組件庫,它是基于AntDesign設(shè)計體系的ReactUI組件庫,主要用于研發(fā)企業(yè)級中后臺產(chǎn)品,文章詳細(xì)講解了如何下載和按需引入antd組件庫,并通過一個小案例展示了如何使用antd進(jìn)行布局和改造,最后,文章提醒大家在使用過程中可以參考官網(wǎng)的屬性介紹2024-11-11
關(guān)于 Refs ，React 官網(wǎng)講解的對于新手來說不太友好，還是自己一字一句解讀后并以代碼驗(yàn)證的方式后真正理解的.2021-05-05
React引入css的幾種方式及應(yīng)用小結(jié)
這篇文章主要介紹了React引入css的幾種方式及應(yīng)用小結(jié),操作styled組件的樣式屬性,可在組件標(biāo)簽上定義屬性、也可以通過attrs定義屬性,本文通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-03-03
詳解React?ISR如何實(shí)現(xiàn)Demo
這篇文章主要為大家介紹了React?ISR如何實(shí)現(xiàn)Demo詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-07-07