解決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倉庫的選項部分展示了該規(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?useRef原理的深入理解分析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-05-05
詳解如何使用React和MUI創(chuàng)建多選Checkbox樹組件
這篇文章主要為大家詳細(xì)介紹了如何使用 React 和 MUI（Material-UI）庫來創(chuàng)建一個多選 Checkbox 樹組件,該組件可以用于展示樹形結(jié)構(gòu)的數(shù)據(jù),并允許用戶選擇多個節(jié)點,感興趣的可以了解下2024-01-01
React語法中設(shè)置TS校驗規(guī)則的步驟詳解
這篇文章主要給大家介紹了React語法中如何設(shè)置TS校驗規(guī)則,文中有詳細(xì)的代碼示例供大家參考,對大家的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下2023-10-10
React-Hooks之useImperativeHandler使用介紹
這篇文章主要為大家介紹了React-Hooks之useImperativeHandler使用介紹，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-07-07
這篇文章主要介紹了react項目使用redux初始化方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-01-01
路由的配置文件目前我們所有的路由定義都是直接使用Route組件，并且添加屬性來完成的，路由的參數(shù)傳遞有二種方式這，兩種方式在Router6.x中都是提供的hook函數(shù)的API,?類組件需要通過高階組件的方式使用，本文通過示例代碼詳解講解，需要的朋友參考下吧2022-11-11
這篇文章主要介紹了react中braft-editor的基本使用方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
react嵌套路由實現(xiàn)TabBar的實現(xiàn)
本文主要介紹了react嵌套路由實現(xiàn)TabBar的實現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-08-08
今天介紹下React手寫tab切換問題，代碼部分包括父文件，子文件及子文件tab樣式，本文通過實例代碼給大家介紹的非常詳細(xì)，感興趣的朋友跟隨小編一起看看吧2021-11-11
這篇文章主要為大家介紹了React 遠(yuǎn)程動態(tài)組件實踐示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-03-03