在react.js中創建動態列

Question

我正在嘗試在react.js中創建一個動態列，任何機構都有想法嗎？ 我已經完成了static列，但想使它們成為動態的，請看一下我的代碼，並請給我建議。

import React from 'react';
import ReactDataGrid from 'react-data-grid';
class Example extends React.Component {
  constructor(props, context) {
    super(props, context);
    this.createRows();
    this._columns = [
      { key: 'id', name: 'ID' },
      { key: 'title', name: 'Title' },
      { key: 'count', name: 'Count' } ];

    this.state = null;
  }

  createRows = () => {
    let rows = [];
    for (let i = 1; i < 5; i++) {
      rows.push({
        id: i,
        title: 'Title ' + i,
        count: i * 1000
      });
    }

    this._rows = rows;
  };

  rowGetter = (i) => {
    return this._rows[i];
  };

  render() {
    return  (
      <ReactDataGrid
        columns={this._columns}
        rowGetter={this.rowGetter}
        rowsCount={this._rows.length}
        minHeight={200} />);
  }
}

export default Example;

Answer 1

您可以嘗試使用此功能來創建動態列鍵和名稱

createColumns = async (data) => {
    let columns = [], keys = [];
    if (data)
        keys = Object.keys(data);
    for (let i = 0; i < keys.length; i++) {
        columns.push({key: Object.keys(data)[i], name: Object.keys(data)[i]});
    }

    await this.setState({columns});
};