javascript - 使用 React 将数据动态映射到表(无键)

Question

我正在从 JSON 数据创建一个表，主要问题是我不能使用对象键来映射它。 我的 json 是这样的:

[{
    key: 'val',
    key2: 'val',
    key3: 'val'
},
{
    key: 'val',
    key2: 'val',
    key3: 'val'
}]

这是我如何使用列实现标题:

class Table extends Component {

    render() {
        const header = this.props.data.slice(0, 1);
        return (<table>
            <thead>
            <TableHead children={header}/>
            </thead>
            <tbody>
            <TableBody children={this.props.data}/>
            </tbody>
        </table>)
    }
    }

   export default Table;

   class TableHead extends Component {

    render() {
        return (
            <tr>
                {this.props.children.map((header) => {
                    return Object.keys(header).map((el) => {
                        return <th>{el}</th>
                    })
                })}
            </tr>
        )
     }
     }

     export default TableHead;

但我无法理解如何映射遍历对象的表体... 我将我的 JSON 切片作为标题，但我不能用数据来做，我的表看起来像

class TableBody extends Component {

render() {
    const row = this.props.children.map((row) => {
        return Object.values(row).map((el,i) => {
            if (i%Object.values(row).length===0) {
                return <tr><td>{el}</td></tr>
            }else{
                return <td>{el}</td>
            }
        })
    });
    return (
        <tbody>
            {row}
        </tbody>
    )
}
}

export default TableBody;

Answer 1

在为 TableBody 映射行时，我会提取键并重新使用。

有点像

class Table extends Component {
  render() {
    const { data } = this.props;
    const columns = Object.keys(data[0]);
    return (
      <table>
        <thead>
          <TableHead columns={columns} />
        </thead>
        <tbody>
          <TableBody columns={columns} data={data} />
        </tbody>
      </table>
    );
  }
}

class TableHead extends Component {
  render() {
    const { columns } = this.props;
    return (
      <tr>
        {columns.map(header => {
          return <th>{header}</th>;
        })}
      </tr>
    );
  }
}

class TableBody extends Component {
  render() {
    const { columns, data } = this.props;
    return data.map(row => (
      <tr>
        {columns.map(cell => (
          <td>{row[cell]}</td>
        ))}
      </tr>
    ));
  }
}