divセルではなく表セルを使用してデータを表示

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（クローズタグ→オープンタグ）ではないと考えられます。このための回避策はありますか？不均一なHTMLをJSXに配置する方法はありますか？

Answer 1

あなたは、テーブルの行数を計算することによって開始することができます：

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

その後、あなたは0から行へのループができます。申し訳ありません.. HTMLコードがで

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> 
))