React - JSX语法详解（附样例）

在前文中：React - 功能介绍、安装配置说明（附几个简单的入门样例），我演示了如何使用 ReactJS 进行页面开发。本文来着重介绍下 JSX。虽然 React 不强制我们一定要用 JSX，只用 JavaScript 也可以。但使用 JSX 可以让我们开发更加高效，代码更加简洁。

JSX 即 JavaScript XML，是一种在React 组件内部构建标签的类 XML 语法。
JSX 并不是一门新的语言，仅仅是个语法糖（syntactic sugar），允许开发者在 JavaScript 中书写 HTML 语法。最后，每个 HTML 标签都转化为 JavaScript 代码来运行。
这样对于使用 JavaScript 来构建组件以及组件之间关系的应用，在代码层面显得更加清晰。而不再像过于一样用 JavsScript 操作 DOM 来创建组件以及组件之间的嵌套关系。

1. 运行环境

• JSX 必须借助 ReactJS 环境才能运行，所以使用前要先加载 ReactJS 文件（react.js、react-dom.js）
• 除了 ReactJS 环境，还需要加载 JSX 的解析器（browser.js）

具体的下载地址和加载方法，参考我之前的文章：React - 功能介绍、安装配置说明（附几个简单的入门样例）

2. 载入方式

JSX 目前有两种方法载入。
（1）内联方式载入

<script type="text/babel">
    ReactDOM.render(
      <h1>hello jianshu.com</h1>,
      document.getElementById('example')
    );
</script>

（2）外联方式载入
即将 JSX 代码单独放在一个.jsx 文件中。

ReactDOM.render(
     <h1>hello jianshu.com</h1>,
     document.getElementById('example')
);

然后在页面上通过下面的方式引入这个 .jsx 文件。

<script type="text/babel" src="hello.jsx"></script>

3，标签的使用

我们除了可以在 JavaScript 中书写 HTML 标签外（不需要像以前那样做为字符串用引号引起来）。
还可以使用那些由 ReactJS 创建的组件类标签。

var Hello = React.createClass({
    render: function() {
        return <div>欢迎</div>;
    }
});
ReactDOM.render(
     <Hello />,
     document.getElementById('example')
);

比如上面的代码中，我们创建了一个叫 Hello 的组件，此时我们就可以像使用 HTML 标签一样，通过 <Hello/> 的方式把它引入进来。
注意：ReactJS 中约定自定义的组件标签首字母一定要大写，这样便于区分是组件标签还是 HTML 标签。

4. 代码转换

使用 JSX 的书写是为了让我们能更直观地看到组件的 DOM结果，其最终还是通过解析器转化为 JavaScript 代码才能在浏览器端执行。
比如我们写了如下一段代码：

var msg = <h1 width="10px">hello jianshu.com</h1>;

那么解析器就会转化为：

var msg = React.createElement("h1", {width: "10px"}, "hello jianshu.com");

也就是说我们每写一个标签，就相当于调用一次 React.createElement方法并最后返回一个 ReactElement 对象给我们。
当然我们不使用 JSX，而是直接通过 React.createElement 方法来创建 ReactElement 对象也是可以的。React.createElement 方法中各个参数的含义如下：

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

5，执行JavaScript表达式

在 JSX 中运行 JavaScript 表达式，需要将表达式用 {} 括起来。
比如下面我们先定义一个变量，再在 JSX 中调用该变量：

var str = "欢迎访问jianshu.com";
var msg = <h1>{str}</h1>;

6，注释

在 JSX 中，注释的使用和 JavaScript 是一样的，也分为单行注释和多行注释。

var str = "欢迎访问jianshu.com";
//<h1>{str}</h1>
/**
  <h1>{str}</h1>
**/

7，支持ES6功能

在 JSX 中，我们完全可以使用 ES6 的语法。因为强大的解析器会自动对不支持 ES6 语法的浏览器做降级处理。比如下面样例，我们使用了 ES6 中的一个新语法“...”，其作用是遍历对象的。

var props = {};
props.key1 = "1";
props.key2 = "2";
<h1 {...props} key1="3">jianshu.com</h1>

上面执行后，h1 元素会有两属性：key1="3"、key2="2"。（key1 本来是 1，但被后面定义的属性给覆盖变成 3）

8，自定义属性

除了标签特有的属性外，我们也可以自定义一些属性。但这些自定义属性在真正的页面渲染后，是否会显示在页面上由如下规则决定：

• 凡是以 data- 开头的自定义属性，在页面渲染后均可以显示在页面上。
• 非 data- 开头的自定义属性，页面渲染后则不显示。
  比如我们使用 JSX 书写如下代码：

var msg = <h1 height="50" data-test1="test1" test2="test2">jianshu</h1>

最后渲染在页面上的结果如下。可以看到只有以 data- 开头的自定义属性被渲染到页面上，其他自定义属性则被忽略掉。

9，显示HTML字符串

有时候我们需要显示一段 HTML 字符串，而不是 HTML 节点。可以这么写。

<div>{'<h1>这个是html字符串</h1>'}</div>

10，样式的使用

（1）JSX 中的样式是通过 style 属性定义的。和传统 Web 定义不同的是，它不再是一个字符串而是一个 JavaScript 对象。
比如下面样例，第一个大括号表示是 JSX 语法，第二个大括号是 JavaScript 对象。

<div style={{color:'#ff00ff', fontSize: '20px'}}>欢迎访问jianshu.com</div>

（2）对于属性名要转为驼峰命名格式，如果不想转的话，则需要加引号括起来。比如：'font-size':'20px'
（3）也可以通过 className='xxx' 的方式引入样式。（切记是 className 而不是 class）

11，事件绑定

代码如下。JSX 支持所有的 HTML 元素的事件。但要注意的是，事件名称一定要用驼峰命名方式，如果将 onClick 改成 onclick 就不起作用了。

div id="example"></div>
 
<script type="text/babel">
  function testClick() {
    alert("点击了按钮!");
  }
  var app = <button onClick={testClick.bind(this)} style={{fontSize: '28px'}}>
              按钮
            </button>
  ReactDOM.render(
       app,
       document.getElementById('example')
  );
</script>

（2）bind 方法第一个参数是用来设置作用域的。如果要给绑定的事件传递参数，可以从 bind 方法第二个参数起放置我们需要传递的参数。

function testClick(value) {
  alert(value);
}
var app = <button onClick={testClick.bind(this,'我是参数')} style={{fontSize: '28px'}}>
            按钮
          </button>
 
ReactDOM.render(
     app,
     document.getElementById('example')
);