Question

我试图在React中将不同的数据库表呈现为html表。这里的问题是每个表中的列数是不同的。在我的组件中，我正在接收标头数据以及JSON格式的完整表数据。

例如。


For table #1:
header data : ["A","B","c"]
table data : [{"A":1,"B":2,"c":3},{"A":4,"B":5,"c":6}]


For table #2:
header data : ["A","B"]
table data : [{"A":1,"B":2},{"A":4,"B":5}]

现在，如果在Java中我已经写过类似的东西：

for(Object i:tableData)
{
   for(Object j:headerData)
   {
      print(i[j])
   }

}

理想地产生这样的东西：


for table #1:
1 2 3
4 5 6

for table #2:
1 2
3 4

但是我不确定如何做出反应。

到目前为止，我已经编写了如下代码：


<table>
<thead><tr>{this.state.header.map(item=>{<th>{item}</th>})}</tr></thead>
<tbody>....</tbody>
</table>

在这里，我能够获得所需的标题，例如：


for table #1:
A B C

for table #2:
A B

但是我不确定如何打印主体元素。请提供一些可能对我有帮助的建议，提示或链接。

谢谢

Answer 1

您需要迭代每个数组元素中的对象。使用Object.values还要检查Object.keys和Object.entries中是否有迭代对象。

类似的事情应该起作用

<tbody>
{this.state.body.map((item)=> {
   return <tr> 
            { 
              Object.values(item).map(col => <td>{col}</td>)  
            } 
          </tr>
});}
</tbody>

如何在react中渲染嵌套元素

1 个答案: