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>
    ));
  }
}

使用React将数据动态映射到表（无键）

1 个答案: