为什么6 ReactJS成分只能与“出口默认”?

阅读时长 4 分钟读完

在React中,组件的导入和导出是非常重要的一部分。我们通常使用ES6模块语法来导入和导出组件。但是,在某些情况下,你可能会注意到一个奇怪的现象:当你试图从一个文件中导出多个React组件时,只有一个组件可以被正确导入。

这是因为React只允许一个默认导出(也称为出口默认)和多个命名导出。换句话说,如果你想从一个文件中导出多个React组件,你只能将其中一个标记为默认导出,其他组件必须是命名导出。

默认导出和命名导出

首先,让我们回顾一下什么是默认导出和命名导出。

默认导出是指在模块中有且仅有一个导出,并且它是通过关键字 export default 来定义的。这个默认导出可以由导入者随意命名或不命名导入,而且可以直接使用 import ... from ... 语法导入。

例如,假设我们有一个名为 Button 的React组件,我们可以这样定义默认导出:

-- -------------------- ---- -------
-- ---------

------ ----- ---- --------

----- ------ - -- -------- -------- -- -- -
  ------- -------------------------------------
--

------ ------- -------

这将允许另一个文件使用 import 语句来导入 Button 组件:

-- -------------------- ---- -------
-- ------

------ ----- ---- --------
------ ------ ---- -----------

----- --- - -- -- -
  -----
    ------- ----------- -- ---------------------- -----------
  ------
--

------ ------- ----

命名导出允许我们在一个文件中导出多个变量、函数或组件。它们必须使用关键字 export 来定义,并且必须在导入时指定其名称。

例如,假设我们有两个名为 ButtonLink 的React组件,我们可以这样定义命名导出:

-- -------------------- ---- -------
-- -------------

------ ----- ---- --------

------ ----- ------ - -- -------- -------- -- -- -
  ------- -------------------------------------
--

------ ----- ---- - -- ----- -------- -- -- -
  -- --------------------------
--

这将允许另一个文件使用 import 语句来分别导入 ButtonLink 组件:

-- -------------------- ---- -------
-- ------

------ ----- ---- --------
------ - ------- ---- - ---- ---------------

----- --- - -- -- -
  -----
    ------- ----------- -- ---------------------- -----------
    ----- --------------------------------- -- ------------------
  ------
--

------ ------- ----

为什么只能有一个默认导出

你可能会问为什么React只允许一个默认导出。实际上,这是由于ECMAScript规范所规定的一条语法限制。

在ECMAScript中,每个模块只能有一个默认导出。这是因为默认导出是如何解析和加载模块的方式,而命名导出则是添加到模块命名空间中的属性。

所以,当你试图在同一个文件中定义多个默认导出时,JavaScript引擎会认为你正在尝试定义多个重复的模块,默认导出将无法正确地解析和加载。

如何处理多个组件

既然React只允许一个默认导出,那么我们该如何处理多个组件呢?

最简单的方法是将其中一个组件标记为默认导出,其他组件标记为命名导出。例如,如果我们有两个名为 ButtonLink 的组件,我们可以这样定义:

纠错
反馈