Question

我正在尝试制作一个简单的JS框架，以了解它们的工作方式。在我的渲染函数中，它检查vNode的类型并进行渲染。当vNode是一个数组时，它将在完成遍历后引发错误。

 Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'.
 $el.appendChild(render(child));
 ^^^

我尝试将默认空白值添加到vNode { tagName: tag, attrs: attrs || {}, children: stack || [] }，但是它将创建一个<undefined \>标签。我需要数组支持的原因是可以映射到数组并生成HTML

编辑： 渲染功能仅测试元素的类型

  console.log(vNode);
  if (typeof vNode === "string") {
    return document.createTextNode(vNode);
  }

  if (Array.isArray(vNode)) {
    return vNode.map(render);
  }

  // we assume everything else to be a virtual element
  return createDOMNode(vNode);

Answer 1

我认为您应该在致电document.createElement()之前使用$el.appendChild()。

https://developer.mozilla.org/fr/docs/Web/API/Node/appendChild https://developer.mozilla.org/fr/docs/Web/API/Document/createElement

您可能会遇到这样的事情：

const createElement = node => document.createElement(node.tagName) /* and set attributes */
const createElements = nodes => nodes.map(createElement)
const append = (parent, elements) => elements.forEach(element => parent.appendChild(element))

append($el, createElements(nodes))

我认为这可能对您有所帮助

映射元素数组以呈现vdom

1 个答案: