如何將目錄設置為批量 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 之類的東西......）