Question

我有几个React组件作为文件夹ux中的库（以下某些内容）：

import MessageBar from "./atoms/MessageBar/MessageBar";
import Spinner from "./atoms/Spinner/Spinner";
import Button from "./atoms/Button/Button";
import AccordionHeader from "./molecules/AccordionHeader/AccordionHeader";
import AutocompleteList from "./molecules/AutocompleteList/AutocompleteList";
import ButtonGroup from "./molecules/ButtonGroup/ButtonGroup";
import LoginPanel from "./organisms/LoginPanel/LoginPanel";
import WelcomePanel from "./organisms/WelcomePanel/WelcomePanel";

我希望导出这些对象，以便可以从其组中导入：

import LoginPanel from "ux.organisms";

或

import Button from "ux/atoms";

或者其他什么。

我们的想法是从ux库中的特定组中获取元素。

导出所有这些组件的建议方式是什么，组织成组（atoms，molecules，organisms等等？）

PS：

一个。我不想改变组件名称（ButtomAtom等...）

湾结果将是由其他项目导入的npm库。因此，此代码将驻留在我的ux/index.js文件中。

Answer 1

然后在index.js创建一个ux/atoms/文件并填写：

import MessageBar from "./MessageBar/MessageBar";
import Spinner from "./Spinner/Spinner";
import Button from "./Button/Button";
//...

export { MessageBar, Spinner, Button };

所以现在可以做到：

import { MessageBar } from "ux/atoms";

或者如果您需要每个子模块：

import * as Atoms from "ux/atoms";

Javascript如何在组内导出模块

1 个答案: