Question

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

在我的组件中，我有：

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
    },
   ]

所以这是我要使items数组中的每个项目都具有列。这些列标题将是其day属性，单元格将是列表1、2、3、5、6中的值。我该怎么做？

Answer 1

您可能只是在函数中有一个循环，即可根据items列表的第一个对象动态创建所需的标头：

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

  return columns;
}

希望这就是您想要的（除非我不明白这个问题）。

更新

要做的第一件事是构建rows数组以适合您想要显示它们的方式。确实，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如何使用数组创建列标题和单元格

1 个答案: