如何导出 index.js 中的所有组件？

Question

我有一个小问题。有了这个文件的结构，我想揭露所有组件（在index.js），所以它们在到达App.js，这样的：import { Header, Menu } from "../components";。但是我收到错误，既不在组件中Home也不Menu在组件中。这是结构：

src/
  index.js
  app/
    App.js
    createStore.js
    reducers.js
  components/
    index.js  <--------------- In here, I'd like to export all components
    button/
      Button.js
      Button.styles.js
    header/
      Header.js
      Header.styles.js
  modules/ 
    foo/
    bar/

这是标题：

import React from "react";
import { AppBar, Toolbar, Typography } from "@material-ui/core";
import useStyles from "./Header.styles";

const Header = () => {
  const classes = useStyles();

  return (
    <AppBar position="fixed" className={classes.appBar}>
      <Toolbar>
        <Typography variant="h5">LineupFarm</Typography>
      </Toolbar>
    </AppBar>
  );
};

export default Header;

这是组件/index.js

import Header from "../components/Header/Header";
import Menu from "../components/Menu/Menu";

export default {
  Header,
  Menu,
};

...这是我的 App.js：

import React from "react";
import { Route, Switch } from "react-router-dom";
import { ThemeProvider, CssBaseline, Toolbar } from "@material-ui/core";
import { Header, Menu } from "../components"; // <------------ Getting error: "Menu not found in '../components'" Why?

function App() {
  const classes = useStyles();

  return (
      <div className={classes.root}>
        <CssBaseline />
        <Header />
        <Menu />
        <main className={classes.content}>
        </main>
      </div>
  );
}

export default App;

为什么我收到错误“在'../components'中找不到菜单”？我究竟做错了什么？

Answer 1

在你的 index.js 你可以直接做

export {default as Header} from "../components/Header/Header";
export {default as Menu} from "../components/Menu/Menu";

通过这种方式，我们从您选择的模块导入默认导出并将其导出为命名空间模块。

现在您可以将组件导入为

import {Header, Menu} from "../components";