在 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