Question

我通常在我的 React 应用程序的很多地方看到这种语法（主要是在 index.js 中）。所以这个文件只有这个语句；

export {default} from './MyComponent';
export {default as STUB_DATA} from './MyStubDataFile';

使用这种语法有什么意义？

Answer 1

创建模块时使用export语句从模块中导出函数、对象、原始值，以便其他程序可以使用import语句使用

// moduleName.js
export function fun1() { ... }

// UseModule.js
import { fun1 } from './moduleName';

在 React 术语中，我们可以在其他组件中使用无状态组件通过从各自的模块中导出组件，并在其他文件中使用它。

导出默认值：

每个文件一个默认导出。当我们导入时，我们必须指定一个名称并导出如下：

const MyComponent = () => {}
export default MyComponent;

并像这样导入：

import MyDefaultComponent from "./MyDefaultExport";

Answer 2

假设您有一个名为 core 的文件夹。

在 Core 目录中，假设您有以下文件夹结构。

core
  - core.js
  - validators.js
  - hooks.js

现在假设您要在主应用程序中使用这些。

因此，在您的 app.js 中，您可以执行以下操作，

import MyLibCore from './core/core.js';
import Validators from './core/validtors.js';

// pseudocode

// Using main method from our core library
function bootstrap() {
  const isMobile = validate();
  
  if(isMobile) {
    MyLibCore({ mobile : true });
  } else {
    MyLibCore();
  }
  
}

// using a method exposed by our core library
function validate() {
  const isMobile = Validators.isMobile();
  return isMobile;
}

现在注意上面代码的导入语句。现在，如果我们与其他开发人员共享我们的库 CORE，他可能不知道我们的 CORE 库/目录的确切文件夹结构。所以为了让我们的库对重用更友好，我们可以做的是，在我们的库目录中创建一个 index.js 文件。

所以现在我们的目录结构看起来像，

core
  - core.js
  - validators.js
  - hooks.js
  - index.js

现在在 index.js 文件中，我们将方法/变量/函数列表暴露给外部。

为此，在 index.js 文件中。

// Expose default exports from the sub files.
export { default } from './core.js';
export { default as Validators } from './validators.js';
export { default as Hooks } from './Hooks';

// Expose any named exports
export { testRun } from './core.js'

现在每当我们或任何其他开发人员在代码上使用这个核心目录时，

app.js

//import MyLibCore from './core/core.js';
//import Validators from './core/validtors.js';

import MyLibCore, { Validators } from './core';

请注意，通过这样做，

核心目录的用户不需要了解内部文件夹结构。
输入 from './core 就足够了。无需输入'index.js'
现在您可以在 index.js 文件中记录导出的内容，以便于理解。

这是 React 中的一个实际示例。检查 index.js 文件。 https://github.com/mui-org/material-ui/tree/next/packages/material-ui/src/Accordion

然后在这里检查它是如何使用的。 https://material-ui.com/components/accordion/

ES6 模块语法导出默认

2 个答案: