动态解析表格行的数据。

Question

我正试图对表格的数据进行动态解析。到目前为止，我已经尝试了以下方法来显示该表。

  renderTableData = () => {
    return this.props.data.map((item, index) => {
      const { name, value } = item;
      return (
        <tr key={index}>
          <td>{name}</td>
          <td>{value}</td>
        </tr>
      );
    });
  };

在这里，我对显示的字段值进行了硬编码。我需要的是动态的

完整的代码。https:/codesandbox.iosreact-basic-class-component-3kpp5?file=srcTable.js:0-805。

import * as React from "react";

class Table extends React.Component {
  renderTableData = () => {
    return this.props.data.map((item, index) => {
      const { name, value } = item;
      return (
        <tr key={index}>
          <td>{name}</td>
          <td>{value}</td>
        </tr>
      );
    });
  };

  renderTableHeader = () => {
    let header = Object.keys(this.props.data[0]);
    return header.map((key, index) => {
      return <th key={index}>{key.toUpperCase()}</th>;
    });
  };

  render() {
    return (
      <div>
        <table>
          <tbody>
            <tr>{this.renderTableHeader()}</tr>
            {this.renderTableData()}
          </tbody>
        </table>
      </div>
    );
  }
}

export default Table;

Answer 1

你可以用 对象.条目

 renderTableData = () => {
    return this.props.data.map((item, index) => {
      return (
        <tr key={index}>
          {Object.entries(item).map(([key, value])=> <td key={key}>{value}</td>)}
        </tr>
      );
    });
  };

然而，正如你所看到的，你失去了对列的顺序的控制。另外，您可能不希望显示某些列。

你可以通过在栏中添加 Object.entries 与自定义实现的功能

<tr key={index}>
  {Object.entries(item)
   .filter(predicateFunction)
   .sort(sortingFunction).map(([key, value])=> <td key={key}>{value}</td>)}
</tr>

或者换成 数据表