解決React報錯Unexpected default export of anonymous function
總覽
當我們嘗試使用默認導出來導出一個匿名函數(shù)時，會導致"Unexpected default export of anonymous function"警告。為了解決該錯誤，在導出函數(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>;
}
上述代碼的問題在于，我們使用默認導出來導出一個匿名函數(shù)。
命名
為了解決該錯誤，在導出函數(shù)之前，為函數(shù)賦予一個名稱。
// Header.js
// ??? give name to function that's being exported
export default function Header() {
return <h1>hello world</h1>;
}
很重要：如果你要導出一個變量（或一個箭頭函數(shù)）來作為默認導出，你必須在一行中聲明它，在下一行中導出它。你不能在同一行中聲明和默認導出一個變量。
// Header.js
const Header = () => {
return <h1>hello world</h1>;
};
export default Header;
現(xiàn)在你仍然能夠使用默認導入來導入函數(shù)。
// App.js
import Header from './Header';
const App = () => (
<div>
<Header />
</div>
);
export default App;
這種方法鼓勵在導出函數(shù)和導入函數(shù)時重復使用同一個標識符。
默認情況下，eslint規(guī)則會警告我們所有類型的匿名默認導出，例如數(shù)組、函數(shù)、類、對象等等。
注釋單行規(guī)則
如果你想禁用單行的規(guī)則，你可以使用注釋。
// 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應該檢查的內(nèi)容。
Github倉庫的選項部分展示了該規(guī)則的完整默認配置，你可以在你的.eslintrc文件的規(guī)則對象中進行調(diào)整。
總結
為了解決該警告，要么為默認導出函數(shù)進行命名，要么使用eslint單行注釋放過該行代碼。
翻譯原文鏈接：bobbyhadz.com/blog/react-…
以上就是解決React報錯Unexpected default export of anonymous function的詳細內(nèi)容，更多關于React報錯export function的資料請關注腳本之家其它相關文章！
相關文章
這篇文章主要為大家介紹了React?useRef原理的深入理解分析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-05-05
詳解如何使用React和MUI創(chuàng)建多選Checkbox樹組件
這篇文章主要為大家詳細介紹了如何使用 React 和 MUI（Material-UI）庫來創(chuàng)建一個多選 Checkbox 樹組件,該組件可以用于展示樹形結構的數(shù)據(jù),并允許用戶選擇多個節(jié)點,感興趣的可以了解下2024-01-01
這篇文章主要給大家介紹了React語法中如何設置TS校驗規(guī)則,文中有詳細的代碼示例供大家參考,對大家的學習或工作有一定的幫助,需要的朋友可以參考下2023-10-10
React-Hooks之useImperativeHandler使用介紹
這篇文章主要為大家介紹了React-Hooks之useImperativeHandler使用介紹，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪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)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2022-08-08
今天介紹下React手寫tab切換問題，代碼部分包括父文件，子文件及子文件tab樣式，本文通過實例代碼給大家介紹的非常詳細，感興趣的朋友跟隨小編一起看看吧2021-11-11
這篇文章主要為大家介紹了React 遠程動態(tài)組件實踐示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-03-03