Question

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

以下是我的JSON文件：

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

地图功能：

{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>
))}

有点复杂，我建议您将列表分为不同的组件，以使代码可读。

Answer 2

您需要遍历内部multilevels

{data.megamenu.map((menuitem, index) => (
    const innnerItemsDOM = menuitem.multilevel.map((item, index) =>{
       return <li>
                <ul>
                  <li>item.name</li>
                </ul>
              </li>
    })

    return <li> level1.2
     {innnerItemsDOM}
    </li>
))}

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

2 个答案: