javascript - 在 react + jsx 中动态设置 svg circle attr

Question

我有以下代码:

{items.map((item, index) => ( 
  <g className="item" key={index} >                
    <circle r="60" className="md" cx="5%" cy="50%"/>
    <text className="textNode" x="5%" y="50%">
      {item.text}
    </text>
  </g>
 ))}

其中 items 是一个对象数组。我想做的是为数组中的每个项目创建一个 svg 圆圈。

现在所有的圆圈都在一个位置上。如何在每次迭代中将圆的 cx 属性增加 5%？

Answer 1

为什么不增加？

cx={`${5 * (index + 1)}%`}

应导致 cx="5%"、cx="10%" 等。请注意以下内容...

{items.map((item, index) => ( 
  <g className="item" key={index} >                
    <circle r="60" className="md" cx={`${5 * (index + 1)}%`} cy="50%"/>
    <text className="textNode" x="5%" y="50%">
      {item.text}
    </text>
  </g>
))}

JSFiddle demo - 转换的简单展示