Question

我正在尝试使用新的KendoReact库构建一个kendo网格，下面是我的render方法。

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

在official Kendo React Grid demo内的列已成功生成。可以通过在每列上应用Title属性来更改列标题。

如何动态生成React Kendo <gridcolumn>？

1 个答案: