如何将目录设置为批量 JavaScript 导入的“模块”？

Question

就像我们将import * as React from 'react'; 然后例如const [state, setState] = React.useState(false);

我想从一个文件夹中导入一堆我导出的东西，然后使用导入模块的点符号进行访问。

例如，使用“AppsButton”、“HomeButton”、“BugReportButton”和“HelpButton”的“AppBar”组件，我将它们作为 jsx 文件放在同一个文件夹中。 这些文件各自为它们的视图“导出默认”功能。 我想要做：

 import AppBar from '@mui/material/AppBar'; import * as AppBarContent from ".//AppBar"; // hopefully the correct syntax for the folder named "AppBar", which this file sits in

然后使用视图中的每个组件，例如：

 <AppBar> <AppBarContent.AppsButton /> <AppBarContent.HomeButton /> <AppBarContent.BugReportButton /> <AppBarContent.HelpButton /> </AppBar>

我四处寻找并找到了这个资源，但不确定它是否与我所追求的相同，当我使用以下内容制作建议的 index.js 时，它并没有改变任何东西（我可能做错了）。

index.js：

 exports.AppsButton = require("./AppsButton"); exports.HomeButton = require("./HomeButton"); exports.BugReportButton = require("./BugReportButton"); exports.HelpButton = require("./HelpButton"); exports.HelpDrawer = require("./HelpDrawer");

任何单一资源或一些步骤如何实现这一点？

Answer 1

一个文件中不能有多个默认导出。 使用命名导出如下：

appbar.js：

export const BugReport = () => <div> bug </div>
export const Header = () => <div> header </div>
export const Footer = () => <div> Footer </div>

然后您可以按如下方式导入和使用它们：

header.js

import React from "react";
import * as Appbar from "./appbar";

function Header(props) {
  return (
      <div>
        <Appbar.BugReport/>
        <Appbar.Footer/>
        <Appbar.Header/>
      </div>
  );
}

export default Header;

Answer 2

在查看 React 的一些编码标准时，我实际上找到了解决方案：

有一点说“在每个文件夹中创建一个 index.js 用于导出”。 资料来源： https://www.jondjones.com/frontend/react/react-tutorials/react-coding-standards-and-practices-to-level-up-your-code/

在我将index.js添加到导入该文件夹中所有组件然后将它们全部导出的每个文件夹之后，我可以从该文件夹级别导入单个组件作为“模块”（如果术语不正确，请致歉）并将所有组件导入为我可以使用点符号访问的命名源。 请注意，为此，导入（索引导出）现在必须包含花括号。

例如，所有按钮都进入一个新文件夹“buttons”并具有index.js ：

 import AppsButton from "./AppsButton"; import HomeButton from "./HomeButton"; import AppHomeButton from "./AppHomeButton"; import HelpButton from "./HelpButton"; export {AppsButton, HomeButton, AppHomeButton, HelpButton}

然后AppBar.js一个文件夹向上可以做到：

 import {AppsButton, HomeButton, AppHomeButton, HelpButton} from "./buttons"

和

 <AppBar> <AppsButton /> <HomeButton /> <BugReportButton /> <HelpButton /> </AppBar>

或者：

 import * as buttons from "./buttons"

和：

 <AppBar> <buttons.AppsButton /> <buttons.HomeButton /> <buttons.BugReportButton /> <buttons.HelpButton /> </AppBar>

（在这种情况下，我选择了前者，但现在我可以看到在我的代码库的其他区域中，我可以使用这种方法在其他地方重用 appBarContent.buttons.AppsButton 之类的东西......）