我想从包含dynamic th的JSON数组中创建整个表,因此将头部分离为:
th
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:
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个数组并相应显示表。
您的<td>..</td>部分再次出现错别字,{}您的表情不见了。对于首次映射后的动态解决方案,您还需要映射对象。
<td>..</td>
{}
<tr key={index}> <td> { Object.keys(currElement).map(key => currElement[key]) } </td> </tr>