如何清理模块中的import语句

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

您可以将 an 添加index.js到 actions 和 Components 目录中，以便可以在一行中导入更多内容

../../actions/index.js

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

../../components/index.js

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

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

export {
  MatchingCard,
  MapCard,
  ImageCard,
  DocumentCard,
}

那么你的导入语句就变成了

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

Answer 2

您可以在某些连接组件中使用大量进口，这还不错。

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

根据我的经验，有一个真正的解决方案——将事物分解为更小的组件。那么平均而言，每个文件的依赖关系将会减少。

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