Question

我正在尝试使用基于JSON数据的嵌套无序列表创建导航菜单，无论我采用哪种方法（array.map / for-loops / self-invoking函数和每个嵌套级别的显式代码）不知何故a当我为子元素添加标记时，父标记被插入到嵌套列表中。像这样：

<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上排序 - 标签内部不允许使用标签。在包含子列表之前关闭父标记可以解决问题。

导航树中的嵌套子节点从其父节点继承链接标记

1 个答案: