React-data-grid：创建基于另一列的列答案

【问题标题】：React-data-grid: create column that is based on another columnReact-data-grid：创建基于另一列的列
【发布时间】：2017-02-09 02:19:16
【问题描述】：

在 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 访问其单元格的值，而无法访问该行的整个对象。

【问题讨论】：

标签： reactjs react-data-grid

【解决方案1】：

原来这是组件的限制。此处记录了一种解决方法：https://github.com/adazzle/react-data-grid/issues/42

它涉及将getRowMetaData: (row) => row 添加到列定义中。这会在格式化程序组件上填充this.props.dependentValues。

这感觉有点像 hack，有没有更好的方法来访问格式化程序中的行数据？

更新

找到了一个稍微好一点的方法。在rowGetter 方法中，在行上设置您需要的任何额外值，以便您可以简单地按键为它们分配一列。

rowGetter(i) {
  let row = this.props.rows[i];
  row.coordinates = row.latitude + ', ' + row.longitude
  return row;
}

<ReactDataGrid rowGetter={this.rowGetter} ... />

【讨论】：