最终呈现效果:
数据结构:
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}> </div> ) }