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

import Calculator from "./components/calculator"默认情况下将导入./components/calculator/index.js文件，而我猜您在该calculator目录中没有任何index.js，这就是为什么要获取该文件错误

Answer 2

您不能以这种方式导入整个目录。如果您要寻找更清洁的进口产品，请尝试以下操作：

进入您的calculator目录并创建一个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';

您仍然必须一次单独导入它们。但是，这可以防止某些情况下您的导入工作，因为您不一定总是需要使用单个目录中的所有组件。有时您不需要实例中的组件Two，因此只需导入One和Three。

希望这会有所帮助！

在React中导入目录

2 个答案: