如何在反应中渲染嵌套元素

Question

我正在尝试将不同的 db 表呈现为 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>