React中JSX

JSX

JSX,全称是JavaScript XML,JSX是对JavaScript语法的扩展。JSX和CoffeeScript、TypeScript类似,它们最终被转换成JavaScript后被浏览器解释执行。可以说他们是JavaScript是语法糖。React WEB APP开发不一定要使用JSX,但一般建议使用。更简单来说,JSX并不是一个模板语言,是语法糖,JSX能够让开发者在JavaScript代码中直接编写HTML标签。举例来说:

1
2
3
4
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('example')
);

JSX中className

在JSX中HTML代码,并非真实的DOM结构,是虚拟的DOM,它是要被React框架解析后并挂载到DOM上才可以的。我们知道在普通的HTML标签中,要为某个标签设置CSS样式,可以为该标签定义一个class的属性,然后再CSS中通过该class找到HTML元素,并设置样式。但是在ES6中,class是一个关键字,我们就不能直接为HTML标签或者我们通过React自定义的组件设置class属性啦,而是要换成className的属性,然后在CSS中,通过className属性来设置样式。

普通的HTML中,如下:

1
<div class="submit_button"></div>

在JSX中,要是用className,替代class,如下:

1
<div className="submit_button"></div>

JSX中花括号{}

在JSX中的花括号{}是用来表示去JS表达式的值,如{this.state.xxoo}表示获取组件State中的xxoo的属性值。当我们要获取一个对象时,就会出现出现两个花括号,如下

1
{{foo: 122, bar: 'kaka'}} //外面的花括号的含义同前面,里面的花括号是对象自己的花括号啦。

备注:其实JSX中花括号{}中内容是JS代码,可能会表达式,也可能是一行JS语句等。