完全动态地从 JSON 创建表答案

【问题标题】：Create a table from JSON completely dynamically完全动态地从 JSON 创建表
【发布时间】：2018-07-29 15:23:37
【问题描述】：

我想从一个包含动态ths 的 JSON 数组创建整个表，因此将头部解耦为：

import React from 'react';
import TableDataTR from './TableTRView';
const TableView = ({ thds, tableData }) => {
    if (!thds) {
        return <table></table>;
    }
    return (
        <div>
            <table>
                <thead>
                    <tr>
                        {thds.map((data, i) => <th key={i}>{data.th}</th>)}
                    </tr>
                </thead>
                <TableDataTR tableData={tableData}/>
            </table>

        </div>
    )
}
export default TableView;

表格打印了头部，但我无法打印我的tbody：

import React, { Component } from 'react';

class TableDataTR extends Component {
    render() {

       let rows = this.props.tableData.map((currElement, index) =>{
           return(
            <tr key={index}>
                <td>currElement[index]</td>
            </tr>
           ) 
       });


        return (
            <tbody>{rows}</tbody>
        );
      }
}
export default TableDataTR;

示例数据，表头

thds : [ { th: 'th1' },
        { th: 'th2' }]

tableData:[ { tdData1: 'somedata', tdData2: 'somedata2' },
            { tdData1: 'somedata', tdData2: 'somedata2' },]

表头工作正常，但tbody里面的数据根本不显示。

最终目标是获取任意2个数组并相应地显示表格。

【问题讨论】：

您的数据显示为tabledata，但您使用的道具tableData 大写为D。
抱歉，打错了，正在编辑中......
在例如创建一个Minimal, Complete, and Verifiable example CodeSandbox 有人帮助你会更容易。
关闭问题并改为创建沙盒？
这和动态正好相反，我想把它变成通用的。

标签： javascript reactjs

【解决方案1】：

您需要使用键名作为访问表数据

let rows = this.props.tableData.map((currElement, index) => {
      return (
      <tr>
          { Object.keys(currElement).map((item) =>
          (
            <td>{currElement[item]}</td>
     )
       )}
      </tr>   
      )
    });

【讨论】：

这和动态正好相反，我想把它变成通用的。
@ItsikMauy 我已经进行了编辑，请检查它是否满足您的需要
是的，这是我的回答中缺少的逻辑。

【解决方案2】：

您的<td>..</td> 部分再次出现拼写错误，缺少{} 用于您的表达。对于第一次映射后的动态解决方案，您还需要映射您的对象。

<tr key={index}>
    <td>
        {
            Object.keys(currElement).map(key => currElement[key])
        }
    </td>
</tr>

【讨论】：

几乎，它将整个对象映射到一列。
啊。但你明白了:)
我想是的，为行创建另一个组件。