console
const vnode = {
tag: 'div',
props: {},
children: [
{
tag: 'button',
props: {
onClick: ()=>alert('hello world'),
},
children: '点击'
}
]
}
function render(vnode, container){
const el = document.createElement(vnode.tag)
for(const key in vnode.props){
if(/^on/.test(key)){
el.addEventListener(
key.substring(2).toLowerCase(),
vnode.props[key]
)
}else{
el[key] = vnode.props[key]
}
}
if(typeof vnode.children === 'string'){
el.appendChild(document.createTextNode(vnode.children))
}else if(typeof Array.isArray(vnode.children)){
for(const child of vnode.children){
render(child, el)
}
}
container.appendChild(el)
}
const app = document.getElementById('app')
render(vnode, app)
<div id="app"></div>