Question

我将来自JSON数据的数据（21项）显示为reactjs中的行。在每第3个项目之后，我会使用下面的代码将其放到下一行。

<div>{this.props.linkInfo.label}</div>
{(this.props.indexNbr+1) % 3 === 0?  <div style={clearBothStyle}> </div>  : null}

现在需求已经改变，我必须使用表格单元格显示它，所以我使用了这段代码

<td>{this.props.linkInfo.label}</td>
{(this.props.indexNbr+1) % 3 === 0 ?  </tr><tr>  : null}

所以在每3个单元格之后它会开始一个新行，但是我得到一个编译错误，因为在jsx </tr><tr>中不被认为是有效的jsx（关闭标记 - ＆gt;打开标记）。这有解决方法吗？有没有办法在JSX中放置非统一的html？

Answer 1

您可以从计算表的行数开始：

let rows = Math.ceil(data.length / 3);

然后你可以从0循环到行：

Array.from(Array(rows).keys()).map(i => (
  <tr>
    <td>{this.props.linkInfos[i].label}</td>
    <td>{this.props.linkInfos[i + 1].label}</td>
    <td>{this.props.linkInfos[i + 2].label}</td>
  </tr>
))

使用表格单元而不是div显示数据

1 个答案: