Как динамически генерировать React Kendo <GridColumn />?

Question

Я пытаюсь построить сетку кендо, используя новую библиотеку KendoReact, и мой метод рендеринга приведен ниже.

render() {
    var allColumns = this.state.data.length > 0 ? Object.keys(this.state.data[0]) : []
    var columnsToShow = allColumns.map((item,i) => <GridColumn field={item} key={i} />);
    return (<div> 
        <Grid
            data={this.state.data}
        >
            {columnsToShow}

        </Grid>
    </div>
    );
}

Поскольку GridColumns должны быть определены (не автоматически), я хотел генерировать их динамически, то есть в строке 3 var columnsToShow, Может ли кто-нибудь помочь мне понять, почему столбцы не отображаются, а данные отображаются? (Я знаю, что данные присутствуют, потому что, если я определю их отдельно <GridColumn field="Name" /> оно работает.)

Answer 1

Кажется, что код выше в порядке. При использовании вашего динамического создания столбцов

var allColumns = this.state.data.length > 0 ? Object.keys(this.state.data[0]) : []
var columnsToShow = allColumns.map((item,i) => <GridColumn field={item} key={i} />);

внутри официальной демонстрации Kendo React Grid столбцы генерируются успешно. Названия столбцов могут быть изменены с помощью Title опора на каждый столбец.