如何从一个常规文件夹导入多个组件？

Question

我在components文件夹中有很多组件。如何汇入 他们在一排？

例如，我有这个：

import FormField from "./../components/FormField";
import MultiSelect from "./../components/MultiSelect";

但是我想这样导入它：

import {MultiSelect, FormField} from "./../components";

这不起作用。

Answer 1

要这样做：

import { MultiSelect, FormField } from "./../components";

在您的components文件夹中，使用

创建新文件：index.js

export { default as FormField } from './FormField';
export { default as MultiSelect} from './MultiSelect';

Answer 2

只需在组件文件夹中创建index.js

export * from './FormField';
export * from './MultiSelect';

此后，您可以轻松访问。

import {MultiSelect,FormField} from "./../components";

Answer 3

在组件文件夹中添加index.js，

export { default as FormField } from './FormField';
export { default as MultiSelect } from './MultiSelect';

然后在要使用这些组件的文件中，使用以下命令导入它们：

import { MultiSelect,FormField } from "./../components";

Answer 4

您的问题已经有了答案。但是，让我加上我的5美分：

第一：

您可以这样导入：from "../components";而不是from "./../components";

第二：

我在导入方面有一些经验，并且发现import {MultiSelect, FormField} from "./../components";有很多陷阱。您需要创建index.js文件。当您在IDE中搜索MultiSelect的使用时，您将始终拥有index.js，这没有用。同样，如果您决定移动文件，则必须更改3个文件，而不是1个（旧的index.js新的index.js和使用MultiSelect的文件）。

值得吗？当然，这也取决于您！但是现在您知道您可能遇到什么问题了：）