javascript - 如何映射不同 svg 组件的列表？

Question

我有变量所需的 svgs

var SVG1 = require('babel-loader!svg-react-loader!../path/SVG1.svg?name=SVG1')
var SVG2 = require('babel-loader!svg-react-loader!../path/SVG2.svg?name=SVG2')
var SVG3 = require('babel-loader!svg-react-loader!../path/SVG3.svg?name=SVG3')

我使用这些变量作为组件<SVG1/> ，因为这是 svg-react-loader 的要求。

我映射 JSON

{this.props.jsonSting.map((item) =>
  <Component key={item.id}
    name={item.name}
    />
)}

我应该如何将 svg 变量传递给 Component这样每次 map 迭代都会返回下一个 svg。

我尝试添加到 JSON svg 的名称(SVG1、SVG2、SVG3)，然后像这样 {item.svgname} 一样过去，但它不起作用。

有什么想法吗？

Answer 1

将图标放入数组中，然后根据 index 或其他一些变量传递它们:

const icons = [<SVG1/>, <SVG2/>, <SVG3/>]

this.props.jsonSting.map((item, index) =>
  <Component key={item.id}
    name={item.name}
    icon={icons[index % 3]}
  />
)}

您还可以使用 object 文字创建命名集合:

const icons = { SVG1: <SVG1/>, SVG2: <SVG2/>, SVG3: <SVG3/> }

this.props.jsonSting.map(item =>
  <Component key={item.id}
    name={item.name}
    icon={icons[item.svgname]}
  />
)}