在 React 中匯出預設值
Rana Hasnain Khan
2022年5月18日
我們將介紹 React 中的 export
型別以及它們的作用。
React 中的匯出型別
像 export default ReactApp;
一樣匯出和 import like import logo from './logo.svg'
是 ES6 模組系統的一部分。
ES6
中有兩種匯出:命名匯出和預設匯出。
React 中的命名匯出
使用函式名稱匯出的匯出稱為命名匯出,例如 export Function ExFunc(){}
。
可以使用 import { ExFunc } from 'module';
匯入命名模組。匯入名稱應與匯出名稱相同,如本例中的 ExFunc
。
我們可以在一個模組中有多個命名的 exports
。
React 中的預設匯出
預設 export
用於從模組中匯出單個類、原語或函式。有不同的方法可以使用預設的 export
。
通常,預設的 export
寫在函式之後,如下例所示。
# react
function App() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
</header>
</div>
);
}
export default App;
但也可以像下面這樣寫。
# react
export default class ReactApp extends React.Component {
render() {
return <p>Exported Using Default Export</p>;
}
}
而對於函式,它可以寫成。
# react
export default function ReactApp() {
return <p>Exported Using Default Export</p>
}
一旦我們使用了預設的 export
,我們不一定需要將其作為 ReactApp
匯入;我們可以給它起任何名字。
# react
import Y from './ReactApp';
Y
是本地分配給包含該值的變數的名稱,不必將其命名為原始匯出。
使用預設匯出
時要記住的一件重要事情是,與命名匯出
不同,只能有一個預設匯出
。一個模組可以同時命名為 export
和一個預設 export
,它們可以一起匯入。
# react
import Y, { ExFunc1, ExFunc2, etc... } from 'module';
Author: Rana Hasnain Khan
Rana is a computer science graduate passionate about helping people to build and diagnose scalable web application problems and problems developers face across the full-stack.
LinkedIn