用于反应递归的多级下拉列表

Question

我正在构建一个多级菜单，并且想使用递归来显示菜单。类似于here中的多级下拉菜单。

在我的代码中，菜单如下所示。

const menu = [
  {
    name: 'Man Utd',
    menu: [
       {
          name: 'Stadium'
       },
       {
          name: 'About'
       }
    ]
  },
  {
    name: 'Liverpool',
    menu: [
       {
           name: 'Contact'
       }
    ]
  }
];

然后将其传递到我的react组件中。

const Dropdown = ({ menu }) => {
    const renderMenu = (items) => {
        return items.map((item: any, index: any) => {
            return (
                <div>
                    {item.menu ? renderMenu() : item.name}
                </div>
            )
        })
    }

    return (renderMenu(menu));
}

这里的问题是它导致无限循环。

有人可以建议我如何改善它吗？

Answer 1

递归呈现菜单时，需要将<div *ngFor="let item of myList"> {{item.deviceId}} </div> 作为参数传递给item.menu。

示例

renderMenu

const menu = [
  {
    name: "Man Utd",
    menu: [
      {
        name: "Stadium"
      },
      {
        name: "About"
      }
    ]
  },
  {
    name: "Liverpool",
    menu: [
      {
        name: "Contact"
      }
    ]
  }
];

const Dropdown = ({ menu }) => {
  const renderMenu = items => {
    return items.map((item: any, index: any) => {
      return (
        <div style={{ marginLeft: 10 }}>
          {item.name}
          {item.menu ? renderMenu(item.menu) : null}
        </div>
      );
    });
  };

  return <div>{renderMenu(menu)}</div>;
};

ReactDOM.render(<Dropdown menu={menu} />, document.getElementById("root"));

Answer 2

您没有将任何内容传递给renderMenu。您应该调用renderMenu（item.menu）