如何动态生成 React Kendo <GridColumn />？

Question

我正在尝试使用新的 KendoReact 库构建一个 kendo 网格，我的渲染方法如下。

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 />？

How do I generate React Kendo <GridColumn /> dynamically?

reactjs

kendo-react-ui