基于数组中位置的动态菜单

Question

我正在尝试根据数组数组中提供的位置生成动态菜单。

我要实现的目标：

菜单结构如下：

Location 1
  |_ sub-location 1
  |_ sub-location 2
      |_ floor 1
      |_ floor 2
Location 2
  |_ sub-location 1

等等。菜单必须是动态的，因为我事先不知道哪些位置会出现。

位置以数组的形式提供。数组中的每个数组都包含一个位置的完整路径，例如

[
  ["Location 1"],
  ["Location 1", "sub-location 1"],
  ["Location 1", "sub-location 2", "floor 1"]
  ["Location 1", "sub-location 2", "floor 2"]
]

很多情况下，会出现重复。

我正在尝试想出一些巧妙的方法来将其压缩为某种使用 React 呈现它的方式。我正在使用 Antd 的菜单组件。

我正在努力获取适合模型的数组，因为我不知道如何以允许任意数量的子菜单和菜单项的方式构建它。

它能以某种方式制成物体或类似的东西吗？ React 和 javascript.

还是很新的

如果有人能提供一些指导，那将非常有帮助！

Answer 1

这种结构可能更易于理解和使用。

{
    name: 'Location 1',
    sub: [
        {
            name: 'sub-location 1',
            sub: [
                { name: 'floor 1' },
                { name: 'floor 2' },
            ]
        }
    ]
}

让我们将上述结构称为单个 menuItem。现在你可以拥有一系列菜单，就像这样

const menuItems = [menuItem1, menuItem2, ....]

使用此代码转换您的数据

const badMenu = [
    ['Location 1'],
    ['Location 1', 'sub-location 1'],
    ['Location 1', 'sub-location 2', 'floor 1'],
    ['Location 1', 'sub-location 2', 'floor 2'],
    ['Location 2', 'sub-location 2', 'floor 2'],
    ['Location 2', 'sub-location 2', 'floor 2'],
];

const func = (array, menu) => {
    const name = array[0];
    if (!name) {
        return;
    }

    let selected = menu.find((menuItem) => menuItem.name == name);

    if (!selected) {
        selected = { name, sub: [] };
        menu.push(selected);
    }

    func(array.slice(1), selected.sub);
};

let newMenu = [];

for (let i = 0; i < badMenu.length; i++) {
    const menuList = badMenu[i];
    func(menuList, newMenu);
}

console.log(JSON.stringify(newMenu, null, 4));

要使用 antd 呈现此菜单：

const renderMenu = (menu, i) => {
    if (menu.sub && menu.sub.length) {
        return (
            <Menu.SubMenu key={menu.name + i} title={menu.name}>
                {menu.sub.map(renderMenu)}
            </Menu.SubMenu>
        );
    }
    return <Menu.Item key={menu.name + i}>{menu.name}</Menu.Item>;
};

function App() {
    return <Menu>{menu.map(renderMenu)}</Menu>;
}

基于数组中位置的动态菜单

Dynamic menu based on locations from array of arrays

javascript

arrays

menu

reactjs