Reactjs 在React中导入目录

我在src中有一个components目录，它有一个名为calculator的目录，然后它有3个不同的组件，而不是全部导入3个组件，我在想是否可以只导入目录计算器

其中一个组件具有以下代码

 import React from 'react';
import {Textfit} from 'react-textfit';

const Screen = (props) => {
    return (
        <div className="screen--container">
          <Textfit
            max={40}
            throttle={60}
            mode="single"
            className="screen-top"
          >
            { props.expression }
          </Textfit>
          <Textfit
            max={150}
            mode="single"
            className="screen-bottom"
          >
            { props.total }
          </Textfit>
        </div>
      )
}

export default Screen;

但是我把它改成了

const Screen = (props) => { }
export default Screen;

对吗，第一个是什么意思？

---

我引用的代码是：

从“/components/Calculator”

导入计算器默认情况下，这将导入

/components/Calculator/index.js

文件，我猜您在

Calculator

目录中没有任何index.js，这就是为什么会出现错误的原因

您不能以这种方式导入整个目录。如果您正在寻找更清洁的导入，请尝试以下方法：

进入

计算器

目录，创建一个

index.js

文件。然后，在该文件中导入所有3个组件，并将它们作为命名导出导出

/components/calculator/index.js

import One from './One';
import Two from './Two';
import Three from './Three';

export { One, Two, Three };

然后，无论您需要在哪里使用组件，都可以像这样导入它们

import { One, Two, Three } from './calculator';

您仍然需要一次单独导入它们。但是，这会使您的导入变得轻松，因为您可能并不总是需要使用单个目录中的所有组件。有时您不需要从实例中导入组件

2

，所以只需导入

1

和

3

希望这有帮助

import One from './One';
import Two from './Two';
import Three from './Three';

export { One, Two, Three };

import { One, Two, Three } from './calculator';