griddle-react将额外的道具传递给自定义组件

Question

我已经像这样定义了griddle-react的列元数据：

const cols = [
  {"columnName": 'id', "displayName": "ID", "visible": false, "order": 1},
  {"columnName": 'name', "displayName": "Name", "order": 2, "customComponent": BrandNameLink},
  {"columnName": 'description', "displayName": "Description", "order": 3},
  {"columnName": 'dateCreated', "displayName": "Date Created", "visible": true, "order": 4, "customComponent": DateComponent},
  {"columnName": 'lastUpdated', "displayName": "Last Updated", "visible": true, "order": 5, "customComponent": DateComponent},
];

对于name、dateCreated和lastUpdated，我希望将额外的属性传递给这些自定义组件。例如，我的DateComponent如下所示：

import React from 'react';
import Time from 'react-time';

const DateComponent = (props) => {
  return (<Time value={props.rowData.dateCreated} format="MM-DD-YYYY" />);
}

export default DateComponent;

但我希望能够告诉它使用rowData中的dateCreated或lastUpdated，而不是创建两个几乎相同的组件(每个date属性一个)。

Answer 1

这是从this questions那里弄明白的。

当你传递一个customComponent时，你也可以像这样传递customComponentMetadata：

{"columnName": 'dateCreated', "displayName": "Date Created", "visible": true, "order": 4, "customComponent": DateComponent, customComponentMetadata: {
  "dateField": "dateCreated"
}}

然后像这样访问它：

props.metadata.customComponentMetadata.dateField

也就是说，columnName已经作为元数据传入了。因此，虽然我不需要为这个场景传递自定义数据，但我确实需要它来做其他事情。