DOM转换
例如
//这是js的dom
<div id='555'>test内容</div>
//转化为react的jsx语法,是将dom以创建dom的代码段储存创建
React.createElement("div", id: "555",'test内容')
注:js转话jsx中,第二个参数是jsx把js的属性以poops的方式用对象的形式传递,第三个参数是dom内容的传递
思考:那如果dom中有dom,还是兄弟节点呢?
DOM转化有兄弟节点会怎么样?
//js中dom元素里面有节点,还是兄弟节点
<div id='clp'>
<div class='clp1' key='key'>test111</div>
<div class='clp2' key='key1'>
<span>1</span>
<span>1</span>
</div>
</div>
//js转化jsx
React.createElement("div", {
id: "clp"
},
React.createElement("div", {
class: "clp1",
key: "key"
}, "test111"),
React.createElement("div", {
class: "clp2",
key: "key1"
},
React.createElement("span", null, "1"),
React.createElement("span", null, "1")));
转化方式还是上面那样,dom转化以React.createElement的形式,里面的兄弟节点以数组的形式往下传递,但是并没有转化为数组,而是一个一个参数往后排列
思考:如果不是DOM而是组件呢?
DOM和组件转换的区别,以及为什么组件要以大写的开头
function Clp(){
return <a>白水之城</a>
}
<Clp>
<span>测试1</span>
<span>测试2</span>
</Clp>
//js转化jsx
React.createE你个uanshelement(Clp, {
class: "clp2",
key: "key1"
},
React.createElement("span", null, "1"),
React.createElement("span", null, "1"));
