0
点赞
收藏
分享

微信扫一扫

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

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

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)

举报

相关推荐

0 条评论