三、JSX 语法
最后更新于：2022-04-01 03:42:11
## 三、JSX 语法
上一节的代码， HTML 语言直接写在 JavaScript 语言之中，不加任何引号，这就是 [JSX 的语法](http://facebook.github.io/react/docs/displaying-data.html#jsx-syntax)，它允许 HTML 与 JavaScript 的混写（查看 [Demo02](https://github.com/ruanyf/react-demos/blob/master/demo02/index.html) ）。
> ~~~
> var names = ['Alice', 'Emily', 'Kate'];
>
> React.render(
> <div>
> {
> names.map(function (name) {
> return <div>Hello, {name}!</div>
> })
> }
> </div>,
> document.getElementById('example')
> );
> ~~~
上面代码体现了 JSX 的基本语法规则：遇到 HTML 标签（以 < 开头），就用 HTML 规则解析；遇到代码块（以 { 开头），就用 JavaScript 规则解析。上面代码的运行结果如下。
JSX 允许直接在模板插入 JavaScript 变量。如果这个变量是一个数组，则会展开这个数组的所有成员（查看 [demo03](https://github.com/ruanyf/react-demos/blob/master/demo03/index.html) ）。
> ~~~
> var arr = [
> <h1>Hello world!</h1>,
> <h2>React is awesome</h2>,
> ];
> React.render(
> <div>{arr}</div>,
> document.getElementById('example')
> );
> ~~~
上面代码的arr变量是一个数组，结果 JSX 会把它的所有成员，添加到模板，运行结果如下。
