JSX语法糖转换成Javascript对象结构
import React from 'react'
import ReactDOM from 'react-dom'
let ele = <div><span> hello word </span></div> ;
console.log(ele);
let ele1 = React.createElement('div', null, [React.createElement('span', null, ['hello'])]);
ReactDOM.render(
ele1, document.querySelector('#root')
)
![在这里插入图片描述](https://img-blog.csdnimg.cn/20200513111151392.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzM3NzgwMzY3,size_16,color_FFFFFF,t_70)
JavaScript对象结构渲染DOM元素并插入页面
let eleObj = {
type:'div',
props:{
id:1,
className:'red',
children:['hello',{type:'span',props:{className:'blue',children:['world']}}]
}
}
function render(eleObj,container){
let ele = document.createElement(eleObj.type);
let {type,props} = eleObj;
for(let attr in props){
if(attr == 'children'){
props[attr].forEach(item => {
if(typeof item == 'object'){
render(item,ele);
}else{
let node = document.createTextNode(item);
ele.appendChild(node);
}
});
}else if(attr == 'className'){
ele.setAttribute('class',props[attr]);
}else{
ele.setAttribute(attr,props[attr]);
}
}
container.appendChild(ele);
}
render(eleObj,document.querySelector('#root'))