在react + jsx

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 - 简单展示转型