小编典典

完全动态地从JSON创建表

reactjs

我想从包含dynamic th的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个数组并相应显示表。


阅读 278

收藏
2020-07-22

共1个答案

小编典典

您的<td>..</td>部分再次出现错别字,{}您的表情不见了。对于首次映射后的动态解决方案,您还需要映射对象。

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