如何 map 表中的深度嵌套對象與具有動態數據的 react.js 中的行跨度適當的列？

Question

我想在表中輸入 map 數據，以便我應該得到如表所示的結果。 如果該類別中有子類別，則類別數據應跨行。 同樣，子類別應根據類別和子子類別跨越。 任何人都可以在 React.js 中寫下 function 到 map。 我提供 JSON 供參考，如果您相應地修改 JSON 就可以了。 這是 JSON。

[
    {
        "category_id": 6,
        "parent_id": null,
        "name": "Western Wear",
        "slug": "western-wear",
        "sort_order": 0,
        "subCategoryData": [
            {
                "category_id": 7,
                "parent_id": 6,
                "name": "Jumpsuite and Rompers",
                "slug": "jumpsuite-and-rompers",
                "sort_order": 0,
                "subSubCategoryData": [
                    {
                        "category_id": 10,
                        "parent_id": 7,
                        "name": "Rompers",
                        "slug": "rompers",
                        "sort_order": 0
                    },
                    {
                        "category_id": 11,
                        "parent_id": 7,
                        "name": "Jumpsuite",
                        "slug": "jumpsuite",
                        "sort_order": 0
                    }
                ]
            },
            {
                "category_id": 8,
                "parent_id": 6,
                "name": "Dresses",
                "slug": "dresses",
                "sort_order": 0,
                "subSubCategoryData": [
                    {
                        "category_id": 9,
                        "parent_id": 8,
                        "name": "Dress",
                        "slug": "dress",
                        "sort_order": 0
                    }
                ]
            }
        ]
    },
    {
        "category_id": 7,
        "parent_id": 6,
        "name": "Jumpsuite and Rompers",
        "slug": "jumpsuite-and-rompers",
        "sort_order": 0,
        "subCategoryData": [
            {
                "category_id": 10,
                "parent_id": 7,
                "name": "Rompers",
                "slug": "rompers",
                "sort_order": 0,
                "subSubCategoryData": []
            },
            {
                "category_id": 11,
                "parent_id": 7,
                "name": "Jumpsuite",
                "slug": "jumpsuite",
                "sort_order": 0,
                "subSubCategoryData": []
            }
        ]
    },
    {
        "category_id": 8,
        "parent_id": 6,
        "name": "Dresses",
        "slug": "dresses",
        "sort_order": 0,
        "subCategoryData": [
            {
                "category_id": 9,
                "parent_id": 8,
                "name": "Dress",
                "slug": "dress",
                "sort_order": 0,
                "subSubCategoryData": []
            }
        ]
    },
    {
        "category_id": 9,
        "parent_id": 8,
        "name": "Dress",
        "slug": "dress",
        "sort_order": 0,
        "subCategoryData": []
    }
]

<table className="admin-table">
                    <thead className="tbl-head">
                        <tr className="tbl-head-raw">
                            {/* <th>Gender</th> */}
                            <th>Category</th>
                            <th> Sub-Category</th>
                            <th> Sub-Sub-Category</th>
                            <th>Created on<br />Updated on</th>
                            <th>Status</th>
                            <th>Action</th>
                        </tr>
                    </thead>
                    <tbody>
                        {data.map((category, idx) => <tr>
                            {/* <td rowSpan={12}>Women</td> */}
                            <td>{category.name}</td>
                            {<td rowSpan={category.subCategoryData[0]?.subSubCategoryData?.length}>{
                                category.subCategoryData[0]?.name
                            }</td>}
                            {/* <td>{category.subSubCategoryData?.[0]?.name}</td> */}
                            <td>{'updated at'}</td>
                            <td>{category.slug}</td>
                            <td>
                                <label className="switch">
                                    <input type="checkbox" />
                                    <span className="slider round" />
                                </label>
                            </td>
                            <td className=" edit-view-icon flex">
                                <div className="edit-icon">
                                    <SVG name="#icon-edit" />
                                </div>
                                <div className="view-icon">
                                    <SVG name="#icon-eye" />
                                </div>
                            </td>
                        </tr>)}

                    </tbody>
                </table>

Answer 1

由於您的數據數組包含三個級別，因此您可以像這樣將您的數組分成 3 個級別。

data.map(level1 =>{
    <td>{level1.name}</td>
    <td>{level1.slug}</td>
    ......
    (level1.subCategoryData.length > 0)?
           level1.subCategoryData.map(level2 =>{
              <td>{level2 .name}</td>
              <td>{level2.slug}</td>
              ......
               (level2.subCategoryData.length > 0)?
                  level2.subCategoryData.map(level3 =>{
                     <td>{level3 .name}</td>
                     <td>{level3 .slug}</td>
                       ......
                  })
               : null
           })
    : null
)}