Question

我有一张桌子，当单击一行时，将显示更多详细信息的另一行。我正在使用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的新手，因此发现它很难调试。任何帮助将不胜感激。谢谢！

Answer 1

如果是嵌套Json，则需要专门使用dataField，如下所示。希望这会有所帮助！

文档摘录

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

const row = { id：'A001'，地址： { 邮政：“ 1234-12335”，城市：“芝加哥” } } 您可以将dataField与dot（。）一起使用来描述嵌套对象：

dataField：“ address.postal” dataField：“ address.city”

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

1 个答案: