动态解析表行的数据

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.io/s/react-basic-class-component-3kpp5?file=/src/Table.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

您可以使用 Object.entries 循环访问对象属性

 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>

或切换到react-data-table