福州网站大全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>