实现render函数

,

render

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
// render.js
function render(element, container) {

  // 创建 dom
  const dom = element.type === 'TEXT_ELEMENT'
    ? document.createTextNode(element.nodeValue)
    : document.createElement(element.type)

  // 设置 dom 属性
  const isProperty = key => key !== 'children'
  Object.keys(element.props)
    .filter(isProperty)
    .forEach(key => {
      dom[key] = element.props[key]
    })

  // 遍历创建子元素
  element.props.children.forEach(child => {
    render(child, dom)
  })

  // 添加 dom 元素 到 父节点
  container.append(dom)
}

export default render