react组件中批量引入图片

在开发官网等一些偏静态类的网站时，经常会碰到某个组件中需要用到多张图片，正常引入方式如：

import demoBJ from '../../images/demo1.jpg'

所产生的问题就是如果我用到了十张图片资源，同类代码就需要写上十次，麻烦而且不易维护，所以可以采用下面的方式进行整理。

const maths = {
    fixedView1 : "" ,
    fixedView2 : "" ,
    fixedView3 : "" ,
}
const ticks = Object.keys(maths).map(item => require("../../../images/homeImg/" + item + ".png"));

在组件中应用可以直接ticks[0]，ticks[1]等等去使用，需要注意的是require导入模块必须放在import后面，也就是说你的组件结构应该是这样的。

import * as AllSocketStatusActions from '../../../Actions/AllSocketStatus'
import {isCanvas} from '../../../config/isCanvasShow'

const maths = {
    fixedView1 : "" ,
    fixedView2 : "" ,
    fixedView3 : "" ,
}
const ticks = Object.keys(maths).map(item => require("../../../images/homeImg/" + item + ".png"));

在页面上面需要写完import相关之后再写require。

这种的看着会更整洁舒服一些，当然还能在简单省略一些：

const demoImgArr = ["demo1" , "demo2" , "demo3"]
const ticks = demoImgArr.map(item => require("../../images/" + item + ".jpg"))

使用方法都是一样的，具体怎么选择看你，反正哪种方式都要比一堆impor要强得多。