React中多层级数组转表格实现方案咨询

1. 先优化数据结构 #

原数组的层级关系不够直观，建议改成键值对结构，明确区分参与者、备注、分类及对应卡片，后续处理会更简单：

Python 版本 #

participant_data = [
    {
        "participant": "#1",
        "comment": "comment ",
        "categories": [
            {"category": "not set #0", "cards": ["card1", "A very large title title tile1", "A very large title title tile5", "A very large title title tile4", "A very large title title tile6", "A very large title title tile7", "A very large title title tile8", "A very large title title tile10"]},
            {"category": "not set #1", "cards": ["A very large title title tile2", "A very large title title tile9"]},
            {"category": "not set #2", "cards": ["A very large title title tile3"]},
            {"category": "name1", "cards": ["card1", "A very large title title tile1", "A very large title title tile3", "A very large title title tile2", "A very large title title tile4", "A very large title title tile5", "A very large title title tile6", "A very large title title tile7"]},
            {"category": "name2", "cards": ["A very large title title tile8", "A very large title title tile9", "A very large title title tile10"]},
            {"category": "name21", "cards": ["card1", "A very large title title tile1"]},
            {"category": "name22", "cards": ["A very large title title tile2", "A very large title title tile4", "A very large title title tile5", "A very large title title tile9", "A very large title title tile10"]},
            {"category": "name23", "cards": ["A very large title title tile3", "A very large title title tile6", "A very large title title tile7", "A very large title title tile8"]},
            {"category": "test merge", "cards": ["card1", "A very large title title tile1", "A very large title title tile2"]},
            {"category": "merge2", "cards": ["card1", "A very large title title tile1", "A very large title title tile2"]},
            {"category": "cat1", "cards": ["card1", "A very large title title tile1", "A very large title title tile2", "A very large title title tile3", "A very large title title tile4", "A very large title title tile5", "A very large title title tile6"]},
            {"category": "cat2", "cards": ["A very large title title tile7", "A very large title title tile9", "A very large title title tile10"]},
            {"category": "cat3", "cards": ["A very large title title tile8"]}
        ]
    }
]

JavaScript 版本 #

const participantData = [
    {
        participant: "#1",
        comment: "comment ",
        categories: [
            { category: "not set #0", cards: ["card1", "A very large title title tile1", "A very large title title tile5", "A very large title title tile4", "A very large title title tile6", "A very large title title tile7", "A very large title title tile8", "A very large title title tile10"] },
            { category: "not set #1", cards: ["A very large title title tile2", "A very large title title tile9"] },
            { category: "not set #2", cards: ["A very large title title tile3"] },
            { category: "name1", cards: ["card1", "A very large title title tile1", "A very large title title tile3", "A very large title title tile2", "A very large title title tile4", "A very large title title tile5", "A very large title title tile6", "A very large title title tile7"] },
            { category: "name2", cards: ["A very large title title tile8", "A very large title title tile9", "A very large title title tile10"] },
            { category: "name21", cards: ["card1", "A very large title title tile1"] },
            { category: "name22", cards: ["A very large title title tile2", "A very large title title tile4", "A very large title title tile5", "A very large title title tile9", "A very large title title tile10"] },
            { category: "name23", cards: ["A very large title title tile3", "A very large title title tile6", "A very large title title tile7", "A very large title title tile8"] },
            { category: "test merge", cards: ["card1", "A very large title title tile1", "A very large title title tile2"] },
            { category: "merge2", cards: ["card1", "A very large title title tile1", "A very large title title tile2"] },
            { category: "cat1", cards: ["card1", "A very large title title tile1", "A very large title title tile2", "A very large title title tile3", "A very large title title tile4", "A very large title title tile5", "A very large title title tile6"] },
            { category: "cat2", cards: ["A very large title title tile7", "A very large title title tile9", "A very large title title tile10"] },
            { category: "cat3", cards: ["A very large title title tile8"] }
        ]
    }
];

2. 两种表格展示方案 #

方案A：逐卡片分行（清晰明确，适合精准查看每张卡片归属） #

每张卡片单独占一行，能直观看到每一张卡片对应的分类和参与者：

方案B：分类合并展示（紧凑简洁，适合概览分类下所有卡片） #

同一分类下的卡片用换行展示，减少表格行数：

3. 自动生成表格的代码示例 #

Python 生成代码 #

def generate_markdown_table(data, per_card_row=True):
    # 表头
    table = "| 参与者 | 分类 | 卡片 | 备注 |\n|--------|------|------|------|\n"
    for participant in data:
        p_name = participant["participant"]
        p_comment = participant["comment"]
        for category in participant["categories"]:
            cat_name = category["category"]
            cards = category["cards"]
            if per_card_row:
                # 逐卡片分行
                for card in cards:
                    table += f"| {p_name} | {cat_name} | {card} | {p_comment} |\n"
            else:
                # 分类合并，卡片换行
                card_str = "<br>".join(cards)
                table += f"| {p_name} | {cat_name} | {card_str} | {p_comment} |\n"
    return table

# 生成方案A表格
print(generate_markdown_table(participant_data, per_card_row=True))

# 生成方案B表格
print(generate_markdown_table(participant_data, per_card_row=False))

JavaScript 生成代码 #

function generateMarkdownTable(data, perCardRow = true) {
    let table = "| 参与者 | 分类 | 卡片 | 备注 |\n|--------|------|------|------|\n";
    data.forEach(participant => {
        const { participant: pName, comment, categories } = participant;
        categories.forEach(category => {
            const { category: catName, cards } = category;
            if (perCardRow) {
                cards.forEach(card => {
                    table += `| ${pName} | ${catName} | ${card} | ${comment} |\n`;
                });
            } else {
                const cardStr = cards.join("<br>");
                table += `| ${pName} | ${catName} | ${cardStr} | ${comment} |\n`;
            }
        });
    });
    return table;
}

// 生成方案A表格
console.log(generateMarkdownTable(participantData));

// 生成方案B表格
console.log(generateMarkdownTable(participantData, false));

内容的提问来源于stack exchange，提问作者Panos