javascript - jsx建表并限制项目

Question

我想构建这个表

<table>
    <tr>
        <td>1</td>
        <td>2</td>
    </tr>
    <tr>
        <td>3</td>
        <td>more...</td>
    </tr>
</table>

我的数组有超过 4 个项目，例如

[{name:1},{name:2},{name:3},{name:4},{name:5},{name:6}]

我已经完成了限制部分

items.map((obj, i) => {
    if(i < 3) {
        return(<span>{obj.name}</span>)
    } else if(i === 4) {
        return(<span>more...</span>)
    }
})

但是由于名称可能不一样，我必须将 div 或 span 标签转换为表格。

Answer 1

只是明确地构建它？不确定您在寻找什么，但没有必要让它变得更复杂:

var table =
  <table>
    <tbody>
      <tr>
        <td>{items[0].name}</td>
        <td>{items[1].name}</td>
      </tr>
      <tr>
        <td>{items[2].name}</td>
        <td>More...</td>
      </tr>
    </tbody>
  </table>
;