javascript - 如何修复最后一个返回 JavaScript 中所有其他结果的递归函数？

Question

我正在尝试编写一个函数，以递归方式将子项附加到基于 JSON 对象的 DOM。

我遇到的问题是递归中的最后一个 return 会“覆盖”所有其他结果，我不太确定为什么。

这是我的代码:

var tags = [{
  tag: 'div',
  props: [{
    'class': 'meetup-container'
  }],
  children: [{
    tag: 'div',
    props: [{
      class: 'meetup',
      itemscope: '',
      itemtype: 'http://schema.org/Event'
    }],
    children: [{
      tag: 'p',
      props: [{
        itemprop: 'event'
      }]
    }],
  }]
}, {
  tag: 'a',
  props: [{
    href: '#'
  }]
}]

function buildDom(graph) {
  let element;

  graph.forEach((node) => {
    element = document.createElement(node.tag);

    if (node.props && node.props.constructor === Array) {
      node.props.forEach((prop) => {
        let propNames = Object.keys(prop);
        propNames.forEach((propName) => {
          return element.setAttribute(propName, prop[propName]);
        });
      });
    }

    if (node.children) {
      element.appendChild(buildDom(node.children));
      // return element.appendChild(buildDom(node.children));
    }
  });

  return element;
}

let elements = buildDom(tags);

基本上我期望看到的输出是这样的:

<div class="meetup-container">
  <div class="meetup">
      <p itemprop="event"></p>
  </div>
</div>

但我看到的是:

<p itemprop="event"></p> 

但是，如果我 console.log 我的函数的每一步，我可以看到我的函数如何正确地遍历子元素，问题是它没有按照它们的方式附加它们应该去。

Answer 1

您的代码有一些缺陷:

1. 如果数组 graph 中有多个元素，则只返回最后一个元素，而不是预期的元素数组。要解决此问题，请使用 map 并返回结果数组。
2. forEach 中的return 语句没有用。
3. 函数 buildDom 应该返回一个元素数组，因为它需要一个对象数组(参见 1.)，所以 element.appendChild(buildDom(node .children)); 将不再有效。使用 forEach 遍历该数组。

话虽这么说:

function buildDom(graph) {
  return graph.map((node) => {
    let element = document.createElement(node.tag);

    if (node.props && Array.isArray(node.props)) {
      node.props.forEach((prop) => {
        let propNames = Object.keys(prop);
        propNames.forEach((propName) =>
          element.setAttribute(propName, prop[propName])
        );
      });
    }

    if (node.children) {
      buildDom(node.children).forEach(child => element.appendChild(child));
    }

    return element;
  });
}

示例:

function buildDom(graph) {
  return graph.map((node) => {
    let element = document.createElement(node.tag);

    if (node.props && Array.isArray(node.props)) {
      node.props.forEach((prop) => {
        let propNames = Object.keys(prop);
        propNames.forEach((propName) =>
          element.setAttribute(propName, prop[propName])
        );
      });
    }

    if (node.children) {
      buildDom(node.children).forEach(child => element.appendChild(child));
    }

    return element;
  });
}

let tags = [{"tag":"div","props":[{"class":"meetup-container"}],"children":[{"tag":"div","props":[{"class":"meetup","itemscope":"","itemtype":"http://schema.org/Event"}],"children":[{"tag":"p","props":[{"itemprop":"event"}]}]}]},{"tag":"a","props":[{"href":"#"}]}];

let result = document.getElementById("result"),
    elements = buildDom(tags);

elements.forEach(element => result.appendChild(element));

Result: (inspect element to see it)
<div id="result"></div>