如何使用 JSON 在 Nextjs 中制作动态侧边栏答案

【问题标题】：How do i use JSON to make a dynamic Sidebar in Nextjs如何使用 JSON 在 Nextjs 中制作动态侧边栏
【发布时间】：2021-09-07 15:02:13
【问题描述】：

[
  {
    "type": "root",
    "children": [
      {
        "type": "file",
        "route": "Open-EdTech/AWS-Associate-Notes/EC2.md",
        "title": "EC2",
        "path": "/Users/matthewcaseres/Documents/GitHub/AWS-Associate-Notes/EC2.md",
        "treePath": [0],
        "children": [
            {
                        "title": "Purpose/Design",
                        "route": "Open-EdTech/next-mdx-books/about.md/#purposedesign",
                        "type": "heading",
                        "treePath": [0,0]
                    },
                    {
                        "title": "Installation",
                        "route": "Open-EdTech/next-mdx-books/about.md/#installation",
                        "type": "heading",
                        "treePath": [0,1]
                    }
        ]
      },
      {
        "type": "file",
        "route": "Open-EdTech/AWS-Associate-Notes/VPC.md",
        "title": "VPC",
        "path": "/Users/matthewcaseres/Documents/GitHub/AWS-Associate-Notes/VPC.md",
        "treePath": [1]
      },
      {
        "type": "file",
        "route": "Open-EdTech/AWS-Associate-Notes/S3.md",
        "title": "S3",
        "path": "/Users/matthewcaseres/Documents/GitHub/AWS-Associate-Notes/S3.md",
        "treePath": [2]
      },
      {
        "type": "file",
        "route": "Open-EdTech/AWS-Associate-Notes/Databases.md",
        "title": "Databases",
        "path": "/Users/matthewcaseres/Documents/GitHub/AWS-Associate-Notes/Databases.md",
        "treePath": [3]
      },
      {
        "type": "file",
        "route": "Open-EdTech/AWS-Associate-Notes/Global-Infrastructure.md",
        "title": "AWS Global Infrastructure",
        "path": "/Users/matthewcaseres/Documents/GitHub/AWS-Associate-Notes/Global-Infrastructure.md",
        "treePath": [4]
      },
      {
        "type": "file",
        "route": "Open-EdTech/AWS-Associate-Notes/SNS.md",
        "title": "SNS",
        "path": "/Users/matthewcaseres/Documents/GitHub/AWS-Associate-Notes/SNS.md",
        "treePath": [5]
      },
      {
        "type": "file",
        "route": "Open-EdTech/AWS-Associate-Notes/SQS.md",
        "title": "SQS",
        "path": "/Users/matthewcaseres/Documents/GitHub/AWS-Associate-Notes/SQS.md",
        "treePath": [6]
      }
    ],
    "title": "AWS Solutions Architect Associate Notes",
    "treePath": []
  }
]

我一直在尝试学习如何从 JSON 制作侧边导航或侧边栏，这是一个具有多级菜单的侧边栏，不幸的是，没有明确的参考/教程/材料，所以谁有想法，请帮助我和其他 nextjs 学习者知道如何为后代做到这一点。

【问题讨论】：

问题是没有关于如何从json创建侧边栏的明确参考，我想知道怎么做，指南也可以
因为编程指南通常不是这样工作的。你知道如何制作侧边栏吗？如果没有，请先学习。那么，你知道怎么解析json吗？如果没有，也学习一下。然后利用你的知识将这些组合成你想要的。

标签： javascript json reactjs next.js

【解决方案1】：

您可以制作一个顶部带有标题的组件和一个映射函数，该函数遍历子数组并为每次加载 JSON 数据呈现一个按钮。

按钮组件还应该能够映射到另一个级别的子级并映射其下的子级。

您还可以查看侧边导航包，例如：https://reactjsexample.com/minimal-side-navigation-component-for-react/

【讨论】：