React-data-grid:创建基于另一列的列
React-data-grid: create column that is based on another column
在 react-data-grid 中,如何创建显示另一列值的列?
我有一个包含如下内容的对象数组:
{
id: 3,
latitude: 42.101231231,
longitude: -81.123132
}
我的专栏定义是这样的:
this.columns = [
{ key: 'id', name: 'ID' },
//The coordinates key for this column doesn't exist
{ key: 'coordinates', name: 'Coordinates', formatter: coordinatesFormatter }
];
格式化程序:
const coordinatesFormatter = React.createClass({
render() {
return (<div>{latitude}, {longitude}</div>);
}
});
在格式化程序中,我如何访问行上的纬度和经度属性以将它们连接起来?
据我所知,格式化程序只能通过 this.props.value
访问其单元格的值,无法访问该行的整个对象。
原来这是组件的限制。此处记录了一种解决方法:https://github.com/adazzle/react-data-grid/issues/42
它涉及将 getRowMetaData: (row) => row
添加到列定义中。这会在格式化程序组件上填充 this.props.dependentValues
。
这感觉有点乱,有没有更好的方法来访问格式化程序中的行数据?
更新
找到稍微好一点的方法。在 rowGetter
方法中,在行上设置您需要的任何额外值,以便您可以简单地按键为它们分配一列。
rowGetter(i) {
let row = this.props.rows[i];
row.coordinates = row.latitude + ', ' + row.longitude
return row;
}
<ReactDataGrid rowGetter={this.rowGetter} ... />
在 react-data-grid 中,如何创建显示另一列值的列?
我有一个包含如下内容的对象数组:
{
id: 3,
latitude: 42.101231231,
longitude: -81.123132
}
我的专栏定义是这样的:
this.columns = [
{ key: 'id', name: 'ID' },
//The coordinates key for this column doesn't exist
{ key: 'coordinates', name: 'Coordinates', formatter: coordinatesFormatter }
];
格式化程序:
const coordinatesFormatter = React.createClass({
render() {
return (<div>{latitude}, {longitude}</div>);
}
});
在格式化程序中,我如何访问行上的纬度和经度属性以将它们连接起来?
据我所知,格式化程序只能通过 this.props.value
访问其单元格的值,无法访问该行的整个对象。
原来这是组件的限制。此处记录了一种解决方法:https://github.com/adazzle/react-data-grid/issues/42
它涉及将 getRowMetaData: (row) => row
添加到列定义中。这会在格式化程序组件上填充 this.props.dependentValues
。
这感觉有点乱,有没有更好的方法来访问格式化程序中的行数据?
更新
找到稍微好一点的方法。在 rowGetter
方法中,在行上设置您需要的任何额外值,以便您可以简单地按键为它们分配一列。
rowGetter(i) {
let row = this.props.rows[i];
row.coordinates = row.latitude + ', ' + row.longitude
return row;
}
<ReactDataGrid rowGetter={this.rowGetter} ... />