渲染DOM元素

在指定的DOM元素中渲染给定的DOM树。

• 解构第一个参数为type和props。使用type来确定给定的元素是否为文本元素。
• 根据元素的type，使用Document.createTextNode()或Document.createElement()创建DOM元素。
• 使用Object.keys()将属性添加到DOM元素并设置事件监听器，如有必要。
• 使用递归来渲染props.children，如果有的话。
• 最后，使用Node.appendChild()将DOM元素附加到指定的container。

const renderElement = ({ type, props = {} }, container) => {
  const isTextElement = !type;
  const element = isTextElement
    ? document.createTextNode('')
    : document.createElement(type);

  const isListener = p => p.startsWith('on');
  const isAttribute = p => !isListener(p) && p !== 'children';

  Object.keys(props).forEach(p => {
    if (isAttribute(p)) element[p] = props[p];
    if (!isTextElement && isListener(p))
      element.addEventListener(p.toLowerCase().slice(2), props[p]);
  });

  if (!isTextElement && props.children && props.children.length)
    props.children.forEach(childElement =>
      renderElement(childElement, element)
    );

  container.appendChild(element);
};

const myElement = {
  type: 'button',
  props: {
    type: 'button',
    className: 'btn',
    onClick: () => alert('Clicked'),
    children: [{ props: { nodeValue: 'Click me' } }]
  }
};

renderElement(myElement, document.body);