React JS / Material UI - 路径之间具有动态 ID 的面包屑答案

【问题标题】：React JS / Material UI - Breadcrumbs with dynamic Ids in between pathReact JS / Material UI - 路径之间具有动态 ID 的面包屑
【发布时间】：2019-08-02 02:57:37
【问题描述】：

我是新来的反应并尝试在路径之间创建具有动态 ID 的面包屑。

我对组件的支持是：

const breadcrumbsData = {
  path: "facilities/65743/facilitycontact",
  breadcrumbNameMap: {
    "/facilities": "Facility",
    "/facilities/:facilityId": ":facilityId",
    "/facilities/:facilityId/facilitycontact": "Facility Contact"        
  }
};

呈现面包屑的代码是

<Breadcrumbs arial-label="Breadcrumb">
  {paths.map((path, index) => {
    const url = "/" + paths.slice(0, index + 1).join("/");
    const last = index === paths.length - 1;
    return last ? (
      <Typography color="inherit"> {breadcrumbNameMap[url]} </Typography>
    ) : (
      <Link to={url}>{breadcrumbNameMap[url]}</Link>
    );
  })}
</Breadcrumbs>

我尝试了不同的方法，但无法弄清楚如何做到这一点。在路径之间没有 ID 的情况下，它可以完美运行。例如

const breadcrumbsData = {
  path: "facilities/facilityprofile/facilitycontact/workcontact",
  breadcrumbNameMap: {
    "/facilities": "Facility",
    "/facilities/facilityprofile": "Facility Profile",
    "/facilities/facilityprofile/facilitycontact": "Facility Contact"
  }
};

P:S - 尝试了“匹配”但没有去任何地方，我的用例是我手动从道具传递路径。

这是完整的代码

Code Sandbox - BreadCrumbs using react and material UI

【问题讨论】：

标签： reactjs react-router material-ui breadcrumbs

【解决方案1】：

我不太确定您为什么需要这样做，但这里有一个临时解决方案。不要直接使用您的breadcrumbsData.breadcrumbNameMap 来查找名称。对其进行预处理并使用简单的字符串替换生成地图。

例如，定义一个实用程序来预处理地图：

generateNameMap = (id, idKey, map) => { 
  // takes the actual id i.e. '65743', 
  // the template key that need to be replaced with i.e. ':facilityId'
  // and the initial map i.e. breadcrumbsData.breadcrumbNameMap
  const clone = {};
  Object.keys(map).forEach(k => {
    clone[k.replace(idKey, id)] = map[k].replace(idKey, id) // replace the template in both key and value with actual id
  })
  return clone;
}

现在定义您的 breadcrumbNameMap 以使用该实用程序，而不是直接使用 breadcrumbsData.breadcrumbNameMap：

const breadcrumbNameMap = this.generateNameMap(paths[1], ':facilityId', breadcrumbsData.breadcrumbNameMap);

这是一个演示：

const generateNameMap = (id, idKey, map) => {
    const clone = {};
    Object.keys(map).forEach(k => {
      clone[k.replace(idKey, id)] = map[k].replace(idKey, id)
    })
    return clone;
}


const breadcrumbNameMap = generateNameMap('65743', ':facilityId', {
        "/facilities": "Facility",
        "/facilities/:facilityId": ":facilityId",
        "/facilities/:facilityId/workcontact": "Facility Contact",
        "/facilities/facilityprofile/facilitycontact/": "Work Contact"
});
console.log(breadcrumbNameMap);

【讨论】：