4

我正在使用这个 adazzle 组件：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>
)

上面代码的问题是value is not an object。它只传递一个字符串等。

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

4

2 回答 2

1

这就是我如何使它工作...指定自定义格式化程序并将 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}
    />

  )
}
于 2017-07-06T22:39:36.823 回答
1

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

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

现在任何传递给的值formatter都是一个对象。凉爽的！

于 2017-02-13T06:55:41.187 回答