时间戳

首页 > 解决方案 > 从子文件夹导入文件的最有效方法？

javascript - 从子文件夹导入文件的最有效方法？

问题描述

我有一个包含子目录的父目录，每个子目录都包含一个 SVG 组件，我只需要导入其中的一些。我目前正在通过这样做导入我需要的所有组件：

import FacebookIcon from 'project/icons/Facebook';
import TwitterIcon from 'project/icons/Twitter';
import DiscordIcon from 'project/icons/Discord';
import MediumIcon from 'project/icons/Medium';
import YoutubeIcon from 'project/icons/Youtube';

然而，这似乎非常冗长。有没有更简洁的方法来做到这一点？

我考虑过解构，但我不确定如何执行此操作，因为每个文件都位于不同的文件夹中。

标签： javascriptreactjs

解决方案

通常，您希望从单一来源导入类似的组件（您也将获得自动完成功能）：

import {
  FacebookIcon,
  TwitterIcon,
  DiscordIcon,
  DiscordIcon,
  MediumIcon,
  YoutubeIcon,
} from "project/icons";

// Usage
<FacebookIcon/>

// Same
import Icons from './project/icons';

// Usage
const Icon = Icons.FacebookIcon;
<Icon/>

为此，请为每个组件创建index.js文件project/icons并进行命名导出。

export { default as FacebookIcon } from "./FacebookIcon";
...

推荐阅读