React：在可折叠表格中显示分层 JSON 数据

Question

我有以下分层 JSON 数据。我想将它显示在可折叠和分层的表格中。哪个 React UI 框架/插件支持使用 slide bar for the "volume" 字段显示分层数据？如何实现？

[
    {
        "id": 1,
        "name": "a",
        "another": [
        {
            "anotherId": 2,
            "anotherName": "Content1",
            "format": [
            {
                "format": "format1",
                "isEnabled": true,
                "volume": 8
            },
            {
                "format": "format2",
                "isEnabled": true,
                "volume": 6
            }
            ]
        },
        {
            "anotherId": 3,
            "anotherName": "Content2",
            "format": [
            {
                "format": "format4",
                "isEnabled": true,
                "volume": 13
            },
            {
                "format": "format5",
                "isEnabled": true,
                "volume": 20
            }
            ]
        }
        ]
    },
    {
        "id": 2,
        "name": "b",
        "another": [
        {
            "anotherId": 6,
            "anotherName": "Content6",
            "format": [
            {
                "format": "format6",
                "isEnabled": true,
                "volume": 7
            },
            {
                "format": "format6",
                "isEnabled": false,
                "volume": 0
            }
            ]
        }
        ]
    }
]

这就是我希望数据显示的方式。

1              a
 2              Content1
    format1         true        -------8-------------
    format2         true        -----6---------------
 3              Content2
    format4         true        ------------13-------
    format5         true        --------------------20
2              b
 6             Content6
    format6         true        ------7--------------
    format7         false       0--------------------

Answer 1

这是一种使用表格格式的无框架方法。如果你使用像 bootstrap 这样的 ui 框架，你可以只使用它们的类名。 Here's a sandbox 使用名为 react-collapsible 的模块进行折叠。

export default function Test(props) {

var fmtd = dta.map((la, idx) => {
    var fmt1 = la.another.map((lb, idx2) => {
        return(
    <div key = {idx2}>    
        <tr style={{flex: 1, flexDirection: 'row', flexWrap: 'wrap'}} >
            <td style={{paddingRight: 10, fontSize: 16, fontWeight: 'bold'}}> {la.id}</td><td style={{paddingLeft: 10, fontSize: 16, fontWeight: 'bold'}}> {la.name}</td>
        </tr>
        <tr style={{flex: 1, flexDirection: 'row', flexWrap: 'wrap'}}>
            <td style={{paddingRight: 10, fontSize: 16, fontWeight: 'bold'}}> {lb.anotherId}</td><td style={{paddingLeft: 10, fontSize: 16, fontWeight: 'bold'}}> {lb.anotherName}</td>
        </tr>
        { lb.format.map((lc, idx3) => {
            let volBar = []
            for(let i = 0; i <21; i++){
                i === lc.volume ? volBar.push(lc.volume) : volBar.push("-")
            }
        return(
        <tr key={idx3}style={{flex: 1, flexDirection: 'row', flexWrap: 'wrap'}}>
            <td style={{paddingRight: 10, fontSize: 16, fontWeight: 'bold'}}> 
                {lc.format}
            </td>
            <td style={{paddingLeft: 10, fontSize: 16, fontWeight: 'bold'}}> 
            {lc.isEnabled}
            </td>
            <td style={{paddingLeft: 10, fontSize: 16, fontWeight: 'bold'}}> 
            {volBar}
            </td>
        </tr>)
        })}
    </div>)
    })
        return (      
         <table>
            <tbody>
            {fmt1}
            </tbody>
         </table>

        )
})
return fmtd
}