如何导出索引中的所有组件.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;

这是组件/索引.js

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

。这是我的应用程序.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;

为什么我收到错误"在'../组件'"？我做错了什么？

Answer 1

在你的索引中.js你可以直接做

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

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

现在，您可以将组件导入为

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

Answer 2

您的原始语法是在外部公开对象。如果要在App.js中使用它，可以参考以下代码

//App.js
import Component from "../components";
return (
<div className={classes.root}>
<CssBaseline />
<Component.Header />
<Component.Menu />
<main className={classes.content}>
</main>
</div>
);
//

根据我的经验，如果您想使用import {Header, Button} from "../components"，以下代码可能会起作用

// in index.js
export {default as Button} from "../components/Button/Button"
export {default as Header} from "../components/Header/Header"
//in App.js
import {Button, Header} from "../components"

Answer 3

您也可以像这样导出组件：

您的index.js：

export Menu from "../components/Menu/Menu"
export Header from '../components/Header/Header"

然后，您可以通过像这样导入来访问所有组件：

import * as Components from "../components"

或者，您可以简单地编写以下内容：

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

这是一个叫做@babel/plugin-proposal`export-default-from的 Babel 插件。您可以参考此链接

Answer 4

在你的索引.js中，你有

export default {
Header,
Menu,
};

这是导出具有属性的默认对象Header和Menu，而不是导出单个命名属性。

使用当前设置，您可以在 App.js 中执行以下操作：

// the name you use here is up to you, because it is a default export
import components from "../components";
const Header = components.Header;
...
<Header>

但更有可能的是，您想要从 index.js 中的导出中删除default，以便您可以按名称导入各个组件。

您可以在 MDN 上阅读有关默认导出与命名导出的更多信息。

Answer 5

只需删除默认值即可很好地工作

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