如何在 react-bootstrap-table2 中将嵌套的 json 传递给 BootstrapTable答案

【问题标题】：How to pass nested json to BootstrapTable in react-bootstrap-table2如何在 react-bootstrap-table2 中将嵌套的 json 传递给 BootstrapTable
【发布时间】：2019-06-20 18:05:36
【问题描述】：

我有一个表格，当点击一行时，会显示另一行更详细的信息。我正在使用 reactJS 和 react-bootstrap-table2 的 BootstrapTable。

下面是我的json文件：

{
"persons": [{
    "id": 1,
    "name": "A",
    "email": "a@email.com",
    "contracts": [{
        "metric": "metric1",
        "contract_detail": [{
            "cpm": 5,
            "country_code": "US"
        },{
            "cpm": 1,
            "country_code": "AU"
        }]
    },{
        "metric": "metric2",
        "contract_detail": [{
            "cpm": 5,
            "country_code": "US"
        },{
            "cpm": 1,
            "country_code": "AU"
        }]
    }]
},
... ]}

下面是 react-bootstrap-table2 中的 expandRow

renderer: row => (
            <div>
                <BootstrapTable
                    data={row.contracts}
                    columns={this.state.contract_columns}
                    keyField='id'
                    >
                    </BootstrapTable>
            </div>
        )

我预计只是传递 row.contracts 作为数据将填充所有字段，但 country_code 和 cpm 字段为空。

我也尝试使用 map 和 filter 进行循环，但在这种情况下，没有显示任何表格。

我是 react 和 js 的新手，所以发现它很难调试。任何帮助将不胜感激。谢谢！

【问题讨论】：

标签： reactjs

【解决方案1】：

在嵌套 Json 的情况下，需要专门使用 dataField，如下所示。希望这会有所帮助！

文档摘录

column.dataField（必需）- [字符串] 使用 dataField 指定应在此列上应用的字段。如果您的原始数据是嵌套的，例如：

常量行 = { 编号：'A001'，地址： { 邮政：'1234-12335'，城市：“芝加哥” } } 您可以使用 dataField 和 dot(.) 来描述嵌套对象：

dataField: 'address.postal' 数据字段：'address.city'

【讨论】：