Question

我正在慢慢学习如何将组件分解成组件，但我的OCD对某一特定组件感到生气。我有一个包含许多不同卡片/面板的标签视图。标准仪表板。但是，当我添加新卡（和redux操作）时，我的import语句正在快速增长。

import { fetchUser, matchUser, stopMatchUser } from '../../actions/userAction'
import { fetchMatches } from '../../actions/matchAction'
import MatchingCard from '../../components/MatchingCard'
import MapCard from '../../components/MapCard'
import ImageCard from '../../components/ImageCard'
import DocumentCard from '../../components/DocumentCard'

整理它的标准模式是什么？把所有这些类放在一个文件中？我打算创建一个导入文件但是我仍然处于添加许多导入的相同场景中？

任何建议都将受到赞赏。

Answer 1

您可以在某些连接组件中进行大量导入，但这并不是很糟糕。

将组件加入一个文件通常是错误的决定，将它们分开会更好。

根据我的经验，有一个真正的解决方案 - 将内容分解为更小的组件。然后平均而言，每个文件的依赖关系会减少。

此外，您可以考虑其他抽象，例如HOC（https://facebook.github.io/react/docs/higher-order-components.html），它可以减少结果中组件的重复和多样性。

Answer 2

您可以在操作和组件目录中添加index.js，以便在一行中导入更多内容

<强> ../../动作/ index.js

export * from './userAction'
export * from './matchAction'

<强> ../../组件/ index.js

由于组件的默认导出，您可以直接导出它们，就像在操作中一样。

import MatchingCard from './MatchingCard'
import MapCard from './MapCard'
import ImageCard from './ImageCard'
import DocumentCard from './DocumentCard'

export {
  MatchingCard,
  MapCard,
  ImageCard,
  DocumentCard,
}

然后你的import语句变为

import { fetchUser, matchUser, stopMatchUser, fetchMatches } from '../../actions'
import { MatchingCard, MapCard, ImageCard, DocumentCard } from '../../components'

Answer 3

如果要从同一文件夹导入许多组件，则可以通过在组件文件夹中创建index.js文件来减少导入行。

<强> index.js

export * from './MatchingCard';
export * from './MapCard';
export * from './ImageCard';
export * from './DocumentCard';

您现在可以导入这样的组件。

import { MatchingCard, MapCard, ImageCard, DocumentCard} from '../../components'

Answer 4

将所有组件放在一个文件中是不正确的。 React中组件的整体思想是模块化你的结构。

如果您不想在文件中包含如此多的import语句，那么解决方案就是创建一个单独的文件，您可以从中获取所有这些导出文件。

创建一个imports.js文件，例如

export { fetchUser, matchUser, stopMatchUser } from '../../actions/userAction'
export { fetchMatches } from '../../actions/matchAction'
export {default as MatchingCard} from '../../components/MatchingCard'
export {default as MapCard} from '../../components/MapCard'
export {default as ImageCard} from '../../components/ImageCard'
export {default as DocumentCard} from '../../components/DocumentCard'

现在，您可以在文件中导入

import {fetchUser, matchUser, stopMatchUser , fetchMatches, MatchingCard, MapCard, ImageCard, DocumentCard } from './path/to/imports.js

Answer 5

这可能是多余的，并且有些无关紧要，但这仍然是可能的解决方案。对于包含许多类似代码的大型项目，我将越来越多的UI定义为数据。

const formFields = [
  { id: 'name', type: 'string' },
  { id: 'size', type: 'integer' },
  { id: 'isPublic', type: 'boolean' }
]

基于type，它选择要使用的组件类型（文本字段，复选框等），并import为我服务。这将导入推到一个通用的辅助函数，并大大减少了代码库中import语句的数量。

此外，使用alias中的webpack功能可能会更容易找出这些路径。它还使重构文件夹结构变得更加容易。

Answer 6

如果您使用的是Webpack，则可以使用其resolve.alias，可以为常用文件夹（例如src）设置别名，因此您无需编写这些较长的相对路径。

您可以进行设置，以便执行以下操作：

import Component from "@/components/my-component.js"

...其中@表示您的src文件夹，或者仅仅是：

import Component from "components/my-component.js"

无论您在文件夹结构中的哪个位置，这都是可行的，因为它是绝对路径。

// webpack.config.js

module.exports = {
  //...
  resolve: {
    alias: {
      Utilities: path.resolve(__dirname, 'src/utilities/'),
      Templates: path.resolve(__dirname, 'src/templates/')
    }
  }
};

如何清理模块中的import语句

6 个答案: