在React中，组件的导入和导出是非常重要的一部分。我们通常使用ES6模块语法来导入和导出组件。但是，在某些情况下，你可能会注意到一个奇怪的现象：当你试图从一个文件中导出多个React组件时，只有一个组件可以被正确导入。
这是因为React只允许一个默认导出（也称为出口默认）和多个命名导出。换句话说，如果你想从一个文件中导出多个React组件，你只能将其中一个标记为默认导出，其他组件必须是命名导出。
默认导出和命名导出
首先，让我们回顾一下什么是默认导出和命名导出。
默认导出是指在模块中有且仅有一个导出，并且它是通过关键字 export default 来定义的。这个默认导出可以由导入者随意命名或不命名导入，而且可以直接使用 import ... from ... 语法导入。
例如，假设我们有一个名为 Button 的React组件，我们可以这样定义默认导出：
-- --------- ------ ----- ---- -------- ----- ------ - -- -------- -------- -- -- - ------- ------------------------------------- -- ------ ------- -------
这将允许另一个文件使用 import 语句来导入 Button 组件：
-- ------
------ ----- ---- --------
------ ------ ---- -----------
----- --- - -- -- -
-----
------- ----------- -- ---------------------- -----------
------
--
------ ------- ----命名导出允许我们在一个文件中导出多个变量、函数或组件。它们必须使用关键字 export 来定义，并且必须在导入时指定其名称。
例如，假设我们有两个名为 Button 和 Link 的React组件，我们可以这样定义命名导出：
-- ------------- ------ ----- ---- -------- ------ ----- ------ - -- -------- -------- -- -- - ------- ------------------------------------- -- ------ ----- ---- - -- ----- -------- -- -- - -- -------------------------- --
这将允许另一个文件使用 import 语句来分别导入 Button 和 Link 组件：
-- ------
------ ----- ---- --------
------ - ------- ---- - ---- ---------------
----- --- - -- -- -
-----
------- ----------- -- ---------------------- -----------
----- --------------------------------- -- ------------------
------
--
------ ------- ----为什么只能有一个默认导出
你可能会问为什么React只允许一个默认导出。实际上，这是由于ECMAScript规范所规定的一条语法限制。
在ECMAScript中，每个模块只能有一个默认导出。这是因为默认导出是如何解析和加载模块的方式，而命名导出则是添加到模块命名空间中的属性。
所以，当你试图在同一个文件中定义多个默认导出时，JavaScript引擎会认为你正在尝试定义多个重复的模块，默认导出将无法正确地解析和加载。
如何处理多个组件
既然React只允许一个默认导出，那么我们该如何处理多个组件呢？
最简单的方法是将其中一个组件标记为默认导出，其他组件标记为命名导出。例如，如果我们有两个名为 Button 和 Link 的组件，我们可以这样定义：
-- ------------- ------ ----- ---- -------- ----- ---------------------------------------------------------- ---------- -------------------------------------------------------------------------------------