如何在 React Data Grid 中创建链接？答案

【问题标题】：How to create a link in React Data Grid?如何在 React Data Grid 中创建链接？
【发布时间】：2017-02-13 06:41:59
【问题描述】：

我正在使用这个炫酷组件：https://github.com/adazzle/react-data-grid

我正在尝试弄清楚如何创建可点击的链接。他们在这里有一个单元格格式化程序的示例：http://adazzle.github.io/react-data-grid/examples.html#/custom-formatters

但是，格式化程序只传递一个值。由于格式化程序只获取一个传递给它的值，我无法创建格式的链接：

const formatter = ({ value }) => (
  <a href=`${value.id}`>{value.name}</a>
)

上面代码的问题是值不是对象。它只传递一个字符串等。

有人使用react-data-grid 知道如何解决这个问题吗？

【问题讨论】：

标签： reactjs react-data-grid

【解决方案1】：

好的，你给了我一个好主意。您可以使用rowFormatter 将您想要的属性重新映射到对象！谢谢！我的解决方案最终修改了我的 rowGetter。

 const rowGetter = (i) => {
    const row = Object.assign({}, person[i]);
    row.name = person[i];
    return row;
  };

现在传递给formatter 的值是一个对象。酷！

【讨论】：

【解决方案2】：

这就是我如何使它工作...指定自定义格式化程序并将 getRowMetaData 属性添加到列定义。您甚至可以在 getRowMetaData 值中为数据添加道具。

const MyFormatter = React.createClass({
  render(){
    return(
      <a href={this.props.dependentValues.url}>{this.props.dependentValues.name}</a>
    );
  }
});


function MyFunctionalDataTable(props){
  const myCols = [
    {key: "link", name: "Link", width: 200, formatter: MyFormatter, getRowMetaData: (data)=>(data)},
    ...
   ];

  const createRowData = !props.mydata? '' :
    props.mydata.map(function(obj, index){
      ...
      return {"blah": obj.blah,
              "url": obj.url, //doesn't have to match a GUI column
              "name": obj.name, //doesn't have to match a GUI column 
              "column2stuff": obj.blahblah,
      }
  });

  const rowGetter = rowNumber => createRowData[rowNumber];


  return (
    <ReactDataGrid
      columns={myCols}
      rowGetter={rowGetter}
      rowsCount={createRowData.length}
      headerRowHeight={35}
      rowHeight={35}
      minHeight={createRowData.length<15? (37+(35*createRowData.length)) : 500}
    />

  )
}

【讨论】：