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，这样每次迭代都会返回下一个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]}
  />
)}

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

1 个答案: