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

Question

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

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

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

第 4 行错误

Answer 1

You can create an index.js file in the components folder that imports and exports all the components, then you will be able to import the components at the same line.

This question and answer might help you, and the special part is it can performs both import and export using only one single line of code.

Answer 2

正如上面的@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 3

Try importing them individually:

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