javascript - 有没有办法用 Griddle/ReactJS 显示子数组？

Question

假设我想在烤盘网格中建模的数据如下所示：

[
      {
        "custID": 9,
        "custName": "Customer 1",
        "host": "Host 1",
        "mesg": null,
        "password": "Password 1",
        "pm": "PM 1",
        "products": [
          {
            "applyRestrictions": false,
            "exportPath": "iih",
            "export": false,
            "fieldRestriction": null,
            "ftExportPath": null,
            "mesg": null,
            "productCode": "iih",
            "status": 0,
            "xslt": "something.xslt"
          },
          {
            "applyRestrictions": false,
            "exportPath": "lxh/large",
            "export": false,
            "fieldRestriction": "whut.xml",
            "ftExportPath": "lxh/ft",
            "mesg": null,
            "productCode": "lxh",
            "status": 0,
            "xslt": "large.xslt"
          }
        ],
        "status": 0,
        "username": "Username 1"
      },
      {
        "custID": 18,
        "custName": "Customer 2",
        "host": "Host 1",
        "mesg": null,
        "password": "Password 1",
        "pm": "PM 1",
        "products": [],
        "status": 0,
        "username": "Username 1"
      }
]

我创建的 reactJS 组件是这样的（简化）：

var customerColumnData =  [
    {
        "columnName": "custID",
        "order": 1,
        "locked": true,
        "visible": true,
        "displayName" : "Customer ID"
    },
    {
        "columnName": "custName",
        "order": 2,
        "locked": true,
        "visible": true,
        "displayName" : "Name"
    },
    {
        "columnName": "host",
        "order": 3,
        "locked": true,
        "visible": true,
        "displayName" : "FTP Host"
    },
    {
        "columnName": "username",
        "order": 4,
        "locked": false,
        "visible": true,
        "displayName" : "FTP Username"
    },
    {
        "columnName": "password",
        "order": 5,
        "locked": false,
        "visible": true,
        "displayName" : "FTP Password"
    },
    {
        "columnName": "pm",
        "order": 6,
        "locked": false,
        "visible": true,
        "displayName" : "PM"
    },
    {
        "columnName": "products",
        "order": 7,
        "locked": false,
        "visible": true,
        "displayName": "Products"
    }
];

const ExportCustomerGrid = React.createClass(
{
    <snip some stuff here>
    render: function()
    {
        return (
            <div>
                <Griddle results={ this.state.statusRespData } columnMetadata={ customerColumnData } initialSort={1}
                    columns={["custID","custName","host","username","password","pm","products"]} />
            </div>
        );
    }
});

呈现包含该组件的页面会返回以下错误：

Uncaught Invariant Violation: Objects are not valid as a React child (found: object with keys 
{applyFTRestrictions, citationExportPath, exportFT, fieldRestrictionFile, ftExportPath, mesg, productCode,
status, xslt}). If you meant to render a collection of children, use an array instead or wrap the object using
createFragment(object) from the React add-ons. Check the render method of `GridRow`

有没有办法将反应组件与子数组相关联，子数组与父数组元素的属性不同？这似乎是Griddle 文档中提到的限制。

我尝试在 Products 列中添加“customComponent”，但仍然遇到相同的错误。