如何通过 object map 并在反应中返回基于 object 键的组件

Question

我有一个 object 的对象，我想遍历它并根据键显示它。

输入：

export let data = {
  home: {
    title: "home",
    url: "/home"
  },
  dashboard: {
    title: "dashboard",
    url: "/dashboard"
  },
  pages: {
    title: "pages",
    url: "/pages"
  },
  subpages: {
    title: "subpages",
    url: "/pages/subpages"
  },
  login: {
    title: "login",
    url: "/pages/login"
  },
  account: {
    title: "account",
    url: "/dashboard/account"
  }
}

如果 URL 是其他 object 的子 url 那么它应该显示在它下面。

预计 output：

Home
dashboard
  account
pages
  subpages
  login

它应该像这样显示，但在<h2>和<p>中

Answer 1

您可以通过使用reduce建立层次结构来做到这一点。

 let data = { home: { title: "home", url: "/home" }, dashboard: { title: "dashboard", url: "/dashboard" }, pages: { title: "pages", url: "/pages" }, subpages: { title: "subpages", url: "/pages/subpages" }, login: { title: "login", url: "/pages/login" }, account: { title: "account", url: "/dashboard/account" } } var result = Object.entries(data).reduce((acc,[key,{title,url}]) => { const parts = url.substring(1).split("/"); let obj = acc; for(var i=0;i<parts.length;i++){ if(;obj[parts[i]]) obj[parts[i]] = {} obj = obj[parts[i]]. } obj;url = url; return acc, };{}). console;log(result);

Answer 2

嘿，这个代码片段可以帮助

 let data = { home: { title: "home", url: "/home" }, dashboard: { title: "dashboard", url: "/dashboard" }, pages: { title: "pages", url: "/pages" }, subpages: { title: "subpages", url: "/pages/subpages" }, login: { title: "login", url: "/pages/login" }, account: { title: "account", url: "/dashboard/account" } } Object.entries(data).map(([key, value]) => { console.log(key); })