導航樹中的嵌套子節點從其父節點繼承鏈接標記

Question

我正在嘗試創建一個基於JSON數據的嵌套無序列表的導航菜單，無論我采用哪種方法（array.map/for-loops/自調用函數以及每個嵌套級別的顯式代碼），以某種方式獲取父標記當我為子元素添加標簽時，將其插入嵌套列表中。 像這樣：

<ul> // works fine!
  <li><a href="/lvl0-item">Lvl0 Item</a>
    <ul>
      <li>Lvl1 Item A</li>
      <li>Lvl1 Item B</li>
      <li>Lvl1 Item C</li>
    </ul>
  </li>
</ul>

<ul> // gives me headaches!
  <li><a href=/lvl0item">Lvl0 Item</a>
    <ul>
      <a href=/lvl0item"></a> <-- where is this coming from?
      <li><a href="/lvl1item-a">Lvl1 Item A</li>
      <li><a href="/lvl1item-b">Lvl1 Item B</li>
      <li><a href="/lvl1item-c">Lvl1 Item C</li>
    </ul>
  </li>
</ul>

---

這是我最新的和絕望的渲染功能：

function TreeNodes (dataset) {
  var createNodes = dataset.map( function(node) {
    let listObjs = {};

    var subLvlNode = function(listitems) {
      for(let i = 0; i < listitems.length; i++) {
        listObjs[i] = (<li key={listitems[i].id}><a>{listitems[i].title}</a></li>);
      }
      return listObjs;
    };

    if(node.hasOwnProperty('children')) {
      node.lvl1Children = (<ul>{subLvlNode(node.children)}</ul>);
    } else {
      node.lvl1Children = null;
    }

    return (
      <li key={node.id} data-navimg=""><a href={node.href}>{node.title}{node.lvl1Children}</a></li>
    );
  });

  return createNodes;
}

return (
  <nav>
    <ul className="navbar-default">
      {TreeNodes(navNodes.menu)}
    </ul>
  </nav>
);

---

數據結構：

navNodes: { "menu" : [
  { "id": 0, "title": "BAM", "href": "bam/", "children": [
    { "id": "sf", "title": "BAMKID 1", "href": "bamkid1/" },
    { "id": "fsf", "title": "BAMKID 2", "href": "bamkid2/"},
    { "id": "umd", "title": "BAMKID 3", "href": "bamkid3/"}
  ]}
]}

Answer 1

在Github上進行排序-標記在標簽內正式被禁止。 在包含子列表之前先關閉父標簽即可解決此問題。