react-table 如何使用数组创建列 headers 和单元格

Question

我在我的项目中使用 react-table，我想知道如何使用数组动态创建 headers。

在我的组件中我有：

const columns = [
  {Header: 'day', accessor: ''}, 
  {Header: 'day', accessor: ''}
]

<ReactTable
    className="-striped -highlight"
    data={this.props.items}
    columns={columns}
    defaultPageSize={20}/>

我有 json 这样的数据：

"items": [
    {
      "day": "01",
      "city": "A",
      "1": "",
      "2": "",
      "3": "",
      "4": null,
      "5": "",
      "6": 256,
      "7": 36.07,
      "8": 35.15,
      "9": "",
      "10": "",
      "11": 6.49,
      "12": 5.9,
      "13": "",
      "14": "",
      "15": 72.0,
      "16": 62.109375,
      "17": 266.78,
      "18": 83.59375,
      "19": 444.96
    },
    {
      "day": "02",
      "city": "B",
      "1": "",
      "2": "",
      "3": "",
      "4": null,
      "5": "",
      "6": 234,
      "7": 36.52,
      "8": 35.6,
      "9": "",
      "10": "",
      "11": 6.08,
      "12": 5.71,
      "13": "",
      "14": "",
      "15": 64.0,
      "16": 43.162393162393165,
      "17": 121.97,
      "18": 84.1880341880342,
      "19": 346.49
    },
    {
      "day": "03",
      "city": "B",
      "1": "",
      "2": "",
      "3": "",
      "4": null,
      "5": "",
      "6": 221,
      "7": 36.96,
      "8": 35.93,
      "9": "",
      "10": "",
      "11": 5.82,
      "12": 5.28,
      "13": "",
      "14": "",
      "15": 56.99999999999999,
      "16": 39.366515837104075,
      "17": 94.48,
      "18": 78.28054298642535,
      "19": 227.4
    },
   ]

所以我想让项目数组中的每个项目都有列。这些列 headers 将是他们的日期属性并且单元格将是列表 1、2、3、5、6 中的值。我该怎么做？

Answer 1

您可以在函数中加入一个循环，根据 items 列表的第一个 object 动态创建您需要的 headers :

getColumns () {
  let columns = [];
  let headers = Object.keys(items[0]);
  headers.forEach(header => {
    columns.push({
      Header: header
      accessor: ""
    })
  }

  return columns;
}

希望这就是您要找的（除非我没听懂问题）。

更新

首先要做的是构建行数组以适合您想要的显示方式。事实上，items 数组应该被转换成这样的东西：

[{
  "day01": "A",
  "day02": "B",
  "day03": "B"
},
{...}]

可以这样做:

  render () {
    const rows = this.buildDataFromItems(items);   // items is your json array
    const columns = this.buildColumnsFromItems(items);
    return(
      <ReactTable
        columns={columns}
        data={rows}
      />
    )
  }

  buildColumnsFromItems (items) {
    let headers = [];
    items.forEach(item => {
      headers.push("day" + item.day);
    })

    let columns = [];
    headers.forEach(header => {
      columns.push({
        Header: header,
        accessor: header
      })
    });

    return columns;
  }

  buildDataFromItems (items) {
    let rows = [];
    let currentHeader = "";
    let currentRow = {};

    for (let i = 0; i < Object.keys(items[0]).length && Object.keys(items[0])[i] !== "day"; i++) {
      currentRow = {};
      items.forEach(item => {
        currentHeader = "day" + item.day;
        currentRow[currentHeader] = item[Object.keys(items[0])[i]];
      })

      rows.push(currentRow);
    }

    return rows;
  }

我希望这段代码足以引导您找到最终解决方案:)

react-table 如何使用数组创建列 headers 和单元格

react-table how create column headers and cells with array

reactjs

react-table