在react.js中创建动态列

Question

I'm trying to create a dynamic column in react.js any body have an idea? I've already done with the static column but I want to make them dynamic have a look on my code and please give me suggestion.

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

You can try this function to create dynamic column key and name

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});
};