Reach的JSX语法与HTML的异同 - 聂峰军个人博客

JSX语法很像HTML，但它并不是HTML的复制品。JSX规范中也有所说明：JSX并不尝试去遵循任何XML或HTML规范，而是做为一种ECMAScript特性设计的。

属性
JavaScript表达式
事件
样式

1. 属性

JSX以类似HTML的方式实现了属性设置。在HTML中我们会像下面这样设置元素属性：

<div id="a-id" class="class-name">…</div>

JSX参考了HTML的属性设置，也采用类似的方式设置属性，且JSX定义的属性可以在组件内部访问：

var App = React.createClass({
  render: function () {
    return (
      <ul>
        <li><span>name</span>：<strong>{this.props.name}</strong></li>
        <li><span>domian</span>：<strong>{this.props.domain}</strong></li>
      </ul>
    )
  }
});

var domain = "niefengjun.cn";
  ReactDOM.render(
  <App name="IT笔录" domain={domain} />,
  document.getElementById('example')
);

React渲染组件时，组件中的变量和函数会被求值，并将计算值做为DOM（虚拟DOMS）的渲染值。所以在上面的示例中，我们可以使用{domain}表达式做为JSX的属性。完整示例请查看：setProps.html

非DOM属性

JSX中有一些HTML元素中没有的非DOM属性

key，对组件的一个唯一标识，通过该属性可以保持对组在渲染周期内的引用，当对组件进行操作时可通过该属性引用该组件，以实现在不重新渲染的情况下的组件操作。
ref，该属性是父组件对子组件的一个引用，且可以在render方法之外保持对子组件的引用并实现对子组件的操作等。

特殊属性

JSX最终会转换为原生的JavaScript代码，所以一些JavaScript中的关键字在JSX中不能使用，如，for和class要分别使用htmlFor和className代替：

<div htmlFor="jsx-for" className="class-name">……</div>

2. JavaScript表达式

JSX属性比HTML形式更为多样和易用，JSX将花括号{…}中的属性做为JavaScript表达式进行计算。在HTML中无法实现的循环和条件判断等，在JSX属性中都可以实现。

2.1 变量与函数

在上一节中，我们已经介绍了使用变量名或函数实现动态值。除在组件内部直接定义外，我们也可以通过定义组件属性来使用类似的功能：

var name = "今天";

function dateToString(d) {
  return [
	d.getFullYear(),
	d.getMonth()+1,
	d.getDate()
  ].join('-');
}

var App = React.createClass({
render: function () {
  return (
    <ul>
      <li><span>{this.props.name}</span>：<strong>{this.props.date}</strong></li>
    </ul>
  )
}
});

ReactDOM.render(
  <App name={name} date={dateToString(new Date())} />,
  document.getElementById('example')
);	

// 今天：2016-1-23

完整代码请查看：exp-var&function.html。

2.2 运算符

在JSX中同样可以使用三元运算符或逻辑运算符：

var App = React.createClass({
render: function () {
  return (
    <div className="divider">
      <h2>{this.props.isComplete&&true?'完成':'未完成'}</h2><hr/>
    </div>
  )}
});

ReactDOM.render(
  <App />,
  document.getElementById('example')
);

完整代码请查看：operation.html。

3. 事件

JSX捕获一个事件与设置属性的方式一样。因此，我们可以像下面这样捕获一个组件事件：

var App = React.createClass({
handleClick: function(event) {
  return alert('Hello world');
},
render: function () {
  return (
    <div className="divider">
      <h2 onClick={this.handleClick}>Hello world</h2><hr/>
    </div>
  )}
});

ReactDOM.render(
  <App />,
  document.getElementById('example')
);

事实上，React已经处理了组件所有的方法作用及绑定等操作，一般来说不需要手动绑定事件。完整代码请查看：event.html。

4. 样式

React对内联样式进行了规范化处理，处理后同联样式与JavaScript语法规则一样，都采用驼峰式大小写规则，如：

var styles = {
  fontSize: '16px',
  bordeColor: '#3c3c3c'
}

ReactDOM.render(
  <div style={styles}>……</div>,
  document.getElementById('example')
);