在React中导入目录

Question

我在src中有一个组件目录，它有一个名为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;

然后在我的App.js中

import React, { Component } from "react";
import Calculator from "./components/calculator";
import "./App.css";

class App extends Component {
  render() {
    return (
      <div className="calculator--container">
        <Calculator.Screen {...this.props} />
        <Calculator.Keypad {...this.props} />
      </div>
    );
  }
}

export default App;

但是目前它给我一个错误如下./src/App.js未找到模块：无法解析'C：..... \ react-simple-calculator \ src'中的'./components/calculator'

我怎样才能做到这一点？

此外，开发人员的原始代码

export default (props) => {
return ()}

但我把它改成了

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

这是正确的，第一个是什么意思？我指的代码是：https://medium.com/@mazinosukah/lets-build-a-calculator-with-redux-and-react-using-tdd-6cb11946bad4

Answer 1

您无法以这种方式导入整个目录。如果您正在寻找更清洁的进口试试这个：

进入你的calculator目录并创建一个index.js文件。然后，在该文件中导入所有3个组件并将它们导出为名为exports。

./components/calculator/index.就是

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

export { One, Two, Three };

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

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

您仍然需要一次单独导入它们。但是，这可能会使您的导入很可能不会总是需要使用单个目录中的所有组件。有时您不需要实例中的组件Two，因此您只需导入One和Three。

希望这可以帮助！

Answer 2

import Calculator from "./components/calculator"默认情况下这将导入./components/calculator/index.js文件，我猜测你在calculator目录中没有任何index.js，这就是你得到那个错误的原因