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;

但是我希望能够告诉它使用dateCreated中的lastUpdated或rowData来制作2个几乎相同的组件（每个日期属性1个）。

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已经作为元数据传递了。因此，虽然我不需要为此方案传递自定义数据，但我确实需要其他内容。

griddle-react将其他道具传递给自定义组件

1 个答案: