javascript - 显示和映射多个键及其对象数据

Question

我有一个需要映射和显示的 JSON 文件，但我不确定如何映射这样的结构，因为它有点不同。

下面是我的 JSON 文件:

var data = {
"megamenu": [
{
      "name": "level1.2",
      "link": "#",
      "multilevel": {
        "A": [
          {
            "name": "A-one",
            "link": "#"
          }
        ],
        "B": [
          {
            "name": "B-one",
            "link": "#"
          }
        ]
      }
    },
]
}

map 功能:

{data.megamenu.map((menuitem, index) => (
    <li key={index}>{Object.entries(menuitem.multilevel).length}</li>
))}

以下是样本https://stackblitz.com/edit/react-8in6yq

我想创建一个类似这样的结构:

<ul>
        <li>level1.2
        <ul>
            <li>multilevel
            <ul>
                <li>A
              <ul>
                    <li>A-one</li>
                  </ul>
                </li>
                <li>B
                <ul>
                    <li>B-one</li>
                  </ul>
                </li>
              </ul>
            </li>
          </ul>
        </li>
      </ul>

注意:我知道我可以将结构更改为对象而不是数组，但这是我无法处理和更改的。所以必须用这个结构来管理。

Answer 1

那么为什么你不能做这样的事情:

const Multilevel = ({multilevel}) => (
    <ul>
        {Object.keys(multilevel).map(key => (<li key={key}>{key} /* etc*/</li>))}
    </ul>
);

{data.megamenu.map((menuitem, index) => (
    <li key={menuitem.name}>
        {menuitem.name}
        <ul>
            <li>multilevel
                <Multilevel multilevel={menuitem.multilevel}/>
            </li>
        </ul>
    </li>
))}

这有点复杂，我建议您将列表分成不同的组件以提高代码的可读性。