Js / React 循环数据表格一行多列的情况

最终呈现效果：

 

数据结构：

const hfAmounts = [2, 5, 10, 20, 50, 100, 200];

 

React循环遍历：

<table>
  <tbody>
  {
    hfAmounts.map((v, i) =>
      i % 3 === 0 ?
        <tr key={i}>
          {
            hfAmounts.slice(i, (i % 3 === 0 ? i + 3 : i % 3)).map((y, j) =>
              <td key={j}>{y}元</td>
            )
          }
        </tr>
        : null
    )
  }
  </tbody>
</table>

 

方案2（Div or li实现）：

{
  hfAmounts.map((v, i) =>
    <div key={i}>{v}元</div>
  )
}
{
  Array.apply(null, {length: 3 - hfAmounts.length % 3}).map((v, i) =>
    <div key={i}>&nbsp;</div>
  )
}