等价于(JSX写法

JSX语法介绍

大括号里是JavaScript，不要加引号，加引号就会被当成字符串。

三元表达式

JSX本身就和XML语法类似，可以定义属性以及子元素。唯一特殊的是可以用大括号来加入JavaScript表达式.例如:

上述代码经过JSX编译后会得到：

var person = React.createElement_x_x_x_x_x(
  Person,
  {name: windows.isLoggedIn ? window.name : ''}
);

数组递归

数组循环,数组的每个元素都返回一个React组件。

JSX中绑定事件

JSX让事件直接绑定在元素上。

<“button onClick={this.checkAndSubmit.bind(this)}”>Submit<“/button”>

和原生HTML定义事件的唯一区别就是JSX采用驼峰写法来描述事件名称，大括号中仍然是标准的JavaScript表达式，返回一个事件处理函数。

React并不会真正的绑定事件到每一个具体的元素上，而是采用事件代理的模式：在根节点document上为每种事件添加唯一的Listener，然后通过事件的target找到真实的触发元素。这样从触发元素到顶层节点之间的所有节点如果有绑定这个事件，React都会触发对应的事件处理函数。这就是所谓的React模拟事件系统。尽管整个事件系统由React管理，但是其API和使用方法与原生事件一致。

JSX中使用样式

在JSX中使用样式和真实的样式也很类似，通过style属性来定义，但和真实DOM不同的是，属性值不能是字符串而必须为对象。

例如:





或者

要明确记住,{}里面是JS代码,这里传进去的是标准的JS对象。在JSX中可以使用所有的的样式，基本上属性名的转换规范就是将其写成驼峰写法，例如“background-color”变为“backgroundColor”, “font-size”变为“fontSize”，这和标准的JavaScript操作DOM样式的API是一致的。

HTML转义

在组件内部添加html代码,并将html代码渲染到页面上。React默认会进行HTML的转义，避免XSS攻击，如果要不转义，可以这么写：







自定义组件

组件定义之后，可以利用XML语法去声明，而能够使用的XML Tag就是在当前JavaScript上下文的变量名,该变量名就是组件名称。

JSX 非DOM属性

key:组件的唯一标识。

ref:对子组件的引用标识。

dangerouslySetInnerHTML:设置原始html元素展示。

注释：

子节点注释：{}

内联属性注释：// 或者