前言
这一篇来讲React很重要的部分:react中使用JSX语法
正文
什么是JSX语法:就是符合 xml 规范的 JS 语法;(语法格式相对来说,要比HTML严谨很多)可以将HTML语言直接写在JavaScript语言之中,不加任何引号,它允许HTML与JavaScript的混写。这就是JSX的语法。
一、使用JSX语法特点及注意事项
-
当 编译引擎在编译JSX代码的时候,如果遇到了
<
那么就把它当作 HTML代码去编译,如果遇到了{}
就把 花括号内部的代码当作 普通JS代码去编译; -
jsx 语法的本质:并不是直接把 jsx 渲染到页面上,而是 内部先转换成了 createElement 形式,再渲染的;
-
在 jsx 中混合写入 js 表达式:在 jsx 语法中,要把 JS代码写到
{ }
中 -
在 jsx 中 写注释:推荐使用
{ /* 这是注释 */ }
-
使用 camelCase(小驼峰命名)来定义属性的名称:需要使用
className
来替代class
;htmlFor
替换label的for
属性;tabindex
则变为tabIndex
; -
在JSX创建DOM的时候,所有的节点,必须有唯一的根元素进行包裹;
-
在 jsx 语法中,标签必须 成对出现,如果是单标签,则必须自闭和!
-
JSX允许直接在模板插入JavaScript变量。如果这个变量是一个数组,则会展开这个数组的所有成员。
-
React DOM在渲染之前默认会过滤所有传入的值。它可以确保应用不会被注入攻击。所有的内容在渲染之前都被转换成了字符串。这样可以有效地防止XSS(跨站脚本攻击)
-
Babel转译器会把JSX转换成一个名为React.createElement()的方法调用。
-
因为React独有的JSX语法跟JavaScript不兼容。如果在普通的html里面要写jsx语法,凡是使用JSX的地方,都要加上type=“text/jsx”。
二、react中使用JSX语法
2.1 JSX语法使用
首先引入 babel
插件转译器
<script src="/js/babel.min.js"></script>
- 创建虚拟dom元素,再渲染;
const arrStr = ['zs','asd','fff']
const list =[]
arrStr.forEach(item=>{
const name = <p>{
item}</p>
list.push(name)
})
ReactDOM.render(list,document.getElementById('app'))
- 直接在内部循环渲染虚拟dom
const arrStr = ['zs','asd','fff']
ReactDOM.render(
<div>
{
arrStr.map(item=><h3 key={
item}>{
item}</h3>)}
</div>,
document.getElementById('app')
)
- 渲染虚拟dom对象数组的形式
const arrStr2 = [{
id:1,name:'小明',age:<