Reach的JSX语法与HTML的异同

 2016年01月23日    485     声明


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


  1. 属性
  2. JavaScript表达式
  3. 事件
  4. 样式


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 = "itbilu.com";
  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中不能使用,如,forclass要分别使用htmlForclassName代替:

<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')
);