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

Question

我正在尝试从该文件夹导入 2 个组件components。两个组件的类都是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