如何减少从反应中导入

Posted 2023-02-22

【中文标题】如何减少从反应中导入

【英文标题】：How to Reduce import from react

【发布时间】：2019-09-26 15:20:43

【问题描述】：

我正在尝试减少我的反应文件中的导入量，我如何对导入进行分组，以便我可以使用 从文件中获取多个。

  // assets
  import location from "../../assets/home/header/location.svg";
  import banner from "../../assets/home/header/banner.jpg";
  import delivery from "../../assets/home/section-a/delivery.svg";
  import arrow from "../../assets/home/section-b/arrow.svg";
  import stock1 from "../../assets/home/section-c/stock-1.jpg";
  import stock2 from "../../assets/home/section-c/stock-2.jpg";
  import stock3 from "../../assets/home/section-c/stock-3.jpg";

  // components
  import IconList from "./IconList";
  import Image from "../../components/Image";
  import DisplayCard from "../../components/CardGroup/DisplayCard";
  import ListDetail from "../../components/CardGroup/ListDetail";
  import Slide from "../../components/Slide/index";

【参考方案1】：

图像、SVG 和那些你不能使用的文件named export 唯一的方法就是

一一导入

您可以在同一文件中使用 named export 例如多个 functions 或 variables。

export const example = () => () ; 

这样你就可以了

像这样导入它们：

import example, example2,example3 from "./examples";

或使用*导入所有导出functions或variables

 import * as Foo  from "./examples";

 const x = Foo.example();

【讨论】：

你能解释一下如何使用*吗？