React 从一个文件夹中导入多个组件

Question

我正在尝试从components文件夹中导入 2 个组件。 两个组件的 class 都是export default 。

但是，我收到一条错误消息，提示我应该在导入语句中使用花括号。 但是，上面的两个组件都没有使用named export ，因此在导入它们时不需要花括号。

为什么它不起作用？ 我怎样才能使这项工作？

第 4 行错误

Answer 1

正如上面的@casimirth 所说，因为这些组件来自不同的文件，即使在同一个文件夹中，那么您需要分别导入它们，如下所示

import Login from "./components/Login"
import Question from "./components/Question"

但我想我知道你在找什么，能够将它们全部导入一行，对吗？

以下是几种方法

1.将它们全部放在一个文件中并使用exports ，因为在一个文件中只有一个组件可以使用export default

// ./components/componentfile.js
export const Login = () => {...
export const Question = () => {...

然后在您使用它们的地方，您可以将它们导入为

import {Login, Question} from '.components/componentfile'

如果其中一个文件默认导出如下

const Login = () => {...
export const Question = () => {...
export default Login;

那么使用它们将如下所示

import Login , { Question } from './components/componentfile'

2.您希望将这两个文件分开保存并仍然导入一行

那么您需要在组件文件中添加另一个文件，首选 index.js，因为如果您在不指定文件的情况下命名目录，则默认情况下会调用 index.js

因此，您的组件目录将包含三个文件，

./components
   -index.js
   -login.js
   -questions.js

然后在您的 login.js 上不编辑任何内容，questions.js 将它们导入您的 index.js 并从中导出它们，如下所示

import Login from './login'
import Question from './question'

export {Login, Question}

然后在你使用它们的地方你只需将它们导入如下

import {Login, Question} from './components' //note with index.js no need to mention //it on import

Answer 2

您可以在 components 文件夹中创建一个index.js文件来导入和导出所有组件，然后您就可以在同一行导入组件。

这个问题和答案可能会对您有所帮助，特别之处在于它可以仅使用一行代码执行导入和导出。

Answer 3

尝试单独导入它们：

import Login from "./components/Login"
import Question from "./components/Question"

Answer 4

在您的组件文件夹中的名为“index.js”的文件夹中创建一个新文件，然后在下面执行此操作。

import { Component1 } from "./Component1";
import { Component2 } from "./Component2";

export {
    Component1,
    Component2
}

之后你可以像这样导入..

import { Component1, Component2 } from './components';