有没有办法用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`

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

我已尝试添加＆＃34; customComponent＆＃34;到产品列，但我仍然得到相同的错误。