福州网站大全wp博客seo插件
jsx是什么?
- jsx全称:javaScript XML
- 是react定义的一种类似于XML的js扩展语法,是js+xml。
- xml早期用于存储和传输数据,是标签加数据的形式。只不过后来慢慢的变成了json
- 其本质就是React.createElement(标签,属性,内容)方法的语法糖
- 其作用是为了简化虚拟dom
jsx语法规则
- 定义虚拟dom时,不写引号。
- 虚拟dom标签中混入js 表达式 时,需要使用大括号。这里表达式不是指js代码。下面将js语句(代码)和js表达式进行区分。
- 表达式:一个表达式会产生一个值,可以放在任何一个需要值的地方。例如
- a。一个变量名
- a+b。两个变量相加
- demo(1)。调用函数,并传递1
- arr.map()。对数组进行加工的方法
- function test(){}。定义一个函数
- 总结:就是在左边定义一个 const x= 然后用于接收,如果能接收到,就是表达式。
- 语句(代码):不能进行接收的,也就是不会产生一个值。例如
- for(){}
- if(){}
- switch(){case:xxx}
- 总结:左侧不能用一个变量去接收。
- 表达式:一个表达式会产生一个值,可以放在任何一个需要值的地方。例如
- 如果想用class样式,不是写class=“”,而是className=“”
- 内联样式,则需要两个大括号,第一个表示要写js,第二个表示要写一个对象key-value的形式。如果key是类似font-size这种则需要改成小驼峰形式。
- 虚拟dom必须只有一个根标签
- 标签必须要闭合
- 标签首字母
- 首字母小写,则直接转为html中找同名元素,若没有该标签对应的同名元素就报错
- 首字母大写,则react会渲染对应的组件,如果组件没有定义,则报错
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><!-- 这是进行移动端适配的 --><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>jsx语法规则</title><style>.title {background-color: orange;width: 400px;}</style>
</head><body><!-- 准备“容器” --><div id="test"></div><script src="../js/react.development.js"></script><script src="../js/react-dom.development.js"></script><script src="../js/babel.min.js"></script><script type="text/babel">const myId = "njTech"const myData = "hello,React"// 1、创建虚拟domconst VDOM = (<div><h2 className="title" id={myId}><span style={{ color: "white", fontSize: "40px" }}>{myData.toLowerCase()}</span></h2><input type="text" /><good>这个会找html中对应的标签,但是html中没有这个good标签,所以会给一个警告</good><Good>这个会找组件,但是没有定义Good组件,所以会报错</Good></div>// <input type="text">// 这样是报错的)// 2、渲染虚拟dom到页面ReactDOM.render(VDOM, document.getElementById("test"))/*** jsx语法规则* 1、定义虚拟dom时,不写引号。* 2、虚拟dom标签中混入js表达式时,需要使用大括号* 3、如果想用class样式,不是写class="",而是className=""* 4、内联样式写法style={{}},需要两个大括号,第一个表示要写js,第二个表示要写一个对象key-value的形式。如果key是类似font-size这种则需要改成小驼峰形式。* 5、虚拟dom必须只有一个根标签* 6、标签必须要闭合* 7、标签首字母* 1)首字母小写,则直接转为html中找同名元素,若没有该标签对应的同名元素就报错。* 2)首字母大写,则react会渲染对应的组件,如果组件没有定义,则报错。*/</script>
</body></html>