JavaScript的React框架中的JSX语法学习入门教程

什么是jsx？

在用react写组件的时候，通常会用到jsx语法，粗看上去，像是在javascript代码里直接写起了xml标签，实质上这只是一个语法糖，每一个xml标签都会被jsx转换工具转换成纯javascript代码，当然你想直接使用纯javascript代码写也是可以的，只是利用jsx，组件的结构和组件之间的关系看上去更加清晰。

var mycomponent = react.createclass({/*...*/});
var myelement = <mycomponent someproperty={true} />;
react.render(myelement, document.body);

一个xml标签，比如<mycomponent someproperty={true} />会被jsx转换工具转换成什么呢？

比如：

var nav = react.createclass({/*...*/});
var app = <nav color="blue"><profile>click</profile></nav>;

会被转化为：

var nav = react.createclass({/*...*/});
var app = react.createelement(
 nav,
 {color:"blue"},
 react.createelement(profile, null, "click")
);

那么也就是说，我们写一个xml标签，实质上就是在调用react.createelement这个方法，并返回一个reactelement对象。

reactelement createelement(
 string/reactclass type,
 [object props],
 [children ...]
)

这个方法的第一个参数可以是一个字符串，表示是一个html标准内的元素，或者是一个reactclass类型的对象，表示我们之前封装好的自定义组件。第二个参数是一个对象，或者说是字典也可以，它保存了这个元素的所有固有属性（即传入后基本不会改变的值）。从第三个参数开始，之后的参数都被认作是元素的子元素。

jsx转化器

要把带有jsx语法的代码转化为纯javascript代码，有多种方式，对于内联与html中的代码或者是未经过转化的外部文件，在script标签中要加上type="text/jsx"，并引入jsxtransformer.js文件即可，不过这种方式并不建议在生产环境使用，建议的方法是在代码上线前就将代码转换好，可以使用npm全局安装react-tools：

npm install -g react-tools

并使用命令行工具转化即可（具体用法可以参考jsx -h）：

jsx src/ build/

如果使用自动化工具，比如gulp的话，可以使用相应插件gulp-react。

html模板中使用js

在html模板中使用js非常方便，只需要用大括号把js代码括起来即可。

var names = ['alice', 'emily', 'kate']; 
 
react.render( 
<div> 
{ 
names.map(function (name) { 
return <div>hello, {name}!</div> 
}) 
} 
</div>, 
document.getelementbyid('example') 
); 

编译出来就变成了这样：

var names = ['alice', 'emily', 'kate']; 
react.render( 
 react.createelement("div", null, names.map(function (name) { 
 return react.createelement("div", null, "hello, ", name, "!") 
 }) ), 
 document.getelementbyid('example') 
); 

要注意的是，大括号实际就是一个变量输出表达式，jsx最终就是直接把花括号中的内容作为 react.createelement 的第三个参数直接传入了（没有任何修改直接传入），所以其中只能放一行表达式，并且任何不能直接作为第三个参数的写法都是错的，那么你这样写就是错的：

react.render( 
<div> 
{ 
var a = 1; 
names.map(function (name) { 
return <div>hello, {name}!</div> 
}) 
} 
</div>, 
document.getelementbyid('example') 
); 

因为很明显其中花括号内的内容直接放在第三个参数上，语法不对。

这么写也是错的：

react.render( 
<div> 
{ 
var a = 1; 
 
} 
</div>, 
document.getelementbyid('example') 
); 

因为 react.createelement(“div”, null, var a = 1;) 是语法错误。
那么你也可以理解为什么大括号中的js表达式不能有分号结尾了吧。

需要注意的是，如果你在属性中输出js变量，是不能加引号的，不然会被当做字符串而不被解析。
应该是这样：

<a title={title}>链接</a>

使用html标签

要创建一个html标准中存在的元素，直接像写html代码一样即可：

var mydivelement = <div classname="foo" />;
react.render(mydivelement, document.body);

不过需要注意的是class和for这两个属性，jsx语法最终是要被转换为纯javascript的，所以要和在javascript dom中一样，用classname和htmlfor。

还有一点是，在创建html标准内的元素时，jsx转化器会丢弃那些非标准的属性，如果一定要添加自定义属性，那么需要在这些自定义属性之前添加data-前缀。

<div data-custom-attribute="foo" />

命名空间式组件

比如开发组件的时候，一个组件有多个子组件，你希望这些子组件可以作为其父组件的属性，那么可以像这样用：

var form = myformcomponent;

var app = (
 <form>
 <form.row>
  <form.label />
  <form.input />
 </form.row>
 </form>
);

这样你只需将子组件的reactclass作为其父组件的属性：

var myformcomponent = react.createclass({ ... });

myformcomponent.row = react.createclass({ ... });
myformcomponent.label = react.createclass({ ... });
myformcomponent.input = react.createclass({ ... });

而创建子元素可以直接交给jsx转化器：

var app = (
 react.createelement(form, null,
  react.createelement(form.row, null,
   react.createelement(form.label, null),
   react.createelement(form.input, null)
  )
 )
);

该功能需要0.11及以上版本

javascript表达式

在jsx语法中写javascript表达式只需要用{}即可，比如下面这个使用三目运算符的例子：

// input (jsx):
var content = <container>{window.isloggedin ? <nav /> : <login />}</container>;
// output (js):
var content = react.createelement(
 container,
 null,
 window.isloggedin ? react.createelement(nav) : react.createelement(login)
);

不过要注意的是，jsx语法只是语法糖，它的背后是调用reactelement的构造方法react.createelement的，所以类似这样的写法是不可以的：

// this jsx:
<div id={if (condition) { 'msg' }}>hello world!</div>

// is transformed to this js:
react.createelement("div", {id: if (condition) { 'msg' }}, "hello world!");

可以从转化后的javascript代码中看出明显的语法错误，所以要不用三目运算符，要不就这样写：

if (condition) <div id='msg'>hello world!</div>
else <div>hello world!</div>

传播属性（spread attributes）

在jsx中，可以使用...运算符，表示将一个对象的键值对与reactelement的props属性合并，这个...运算符的实现类似于es6 array中的...运算符的特性。

var props = { foo: x, bar: y };
var component = <component { ...props } />;

这样就相当于：

var component = <component foo={x} bar={y} />

它也可以和普通的xml属性混合使用，需要同名属性，后者将覆盖前者：

var props = { foo: 'default' };
var component = <component {...props} foo={'override'} />;
console.log(component.props.foo); // 'override'