如何减少来自React的导入

时间:2019-05-08 20:13:59

标签: javascript css reactjs import jsx

我正在尝试减少React文件中的导入数量,我如何对导入进行分组,以便可以使用{}从文件中获取更多内容。

  // 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 个答案:

答案 0 :(得分:4)

图像,SVG和您无法使用named export的这类文件,唯一的方法是

一个一个地导入它们

例如,您可以将named export {}用于同一文件中的多个functionsvariables

export const example = () => () ; 

这样您就可以

像这样导入它们:

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

或使用*导入所有导出functionsvariables

 import * as Foo  from "./examples";

 const x = Foo.example();