JSON2DOM = react 的 render 函数

Question

问题

{
  tag: 'DIV',
  attrs:{
  id:'app'
  },
  children: [
    {
      tag: 'SPAN',
      children: [
        { tag: 'A', children: [] }
      ]
    },
    {
      tag: 'SPAN',
      children: [
        { tag: 'A', children: [] },
        { tag: 'A', children: [] }
      ]
    }
  ] }

把上诉虚拟 Dom 转化成下方真实 Dom

<div>
  <span>
    <a></a>
  </span>
  <span>
    <a></a>
    <a></a>
  </span>
</div>

答案

遍历数据创建即可

function render(virtualDOM) {
  const { tag, attrs = {}, children } = virtualDOM;
  const elem = document.createElement(tag.toLowerCase());
  for (let key in attrs) {
    elem.setAttribute(key, attrs[key]);
  }
  if (typeof children === "string") {
    elem.textContent = children;
  } else if (Array.isArray(children)) {
    children
      .map((item) => render(item))
      .forEach((dom) => {
        elem.appendChild(dom);
      });
  }

  return elem;
}

// test
const json = {
    tag: 'DIV',
    attrs:{
    id:'app'
    },
    children: [
      {
        tag: 'SPAN',
        children: [
          { tag: 'A', children: [] }
        ]
      },
      {
        tag: 'SPAN',
        children: [
          { tag: 'A', children: [] },
          { tag: 'A', children: [] }
        ]
      }
    ]
  }

render(json)