React JSX

JSX简介

JSX即 Javascript XML 一种在React组件内部构建标签的类XML语法，是Javascript语法的一种扩展。看起来很像是模板语言，但是并不一样。

JSX特点

• JSX是一种句法变换 — 每一个JSX节点都对应着一个JavaScript函数
• JSX既不提供也不需要运行时库
• JSX并没有改变或者添加Javascript的语义 — 它只是简单的函数调用而已
• JSX可以防止注入攻击

JSX的优势

• 允许使用熟悉的语法来定义HTML元素树
• 提供更加语义化且易懂的标签
• 程序结构更容易被直观化
• 抽象了React CreateElement的创建过程
• 可以随时掌握HTML标签以及生成这些标签的代码
• 是原生的Javascript

基本语法

HTML 语言直接写在 JavaScript 语言之中，不加任何引号，这就是 JSX 的语法，它允许 HTML 与 JavaScript 的混写

{ }

JSX 允许直接在模板插入 JavaScript 变量。JSX将{}之间的值渲染为动态值，如果这个变量是一个数组，则会展开这个数组的所有成员

var arr = ['1','2','3'];

ReactDOM.render(
  <h1>{arr}</h1>,
  document.getElementById("example")
);

结果：123

子节点

React将开始标签之间所有的子节点保存在一个名为this.props.children的特殊组件属性中 eg： Search为自定义的组件

var Search = React.createClass({
  render: function () {
    return (
        < div > {this.props.children}
          < input type="text"/>
          < button > Search</button>
        </div >
    )
  }
});

<Search>Question</Search>

那么this.props.children 的值为Question

属性

JSX有一些自己的特殊属性

• key
• ref

key 是一个可选的唯一的标识符

ref ref允许父组件在render方法之外保持对子组件的一个引用

eg：

render: function () {
    return (
        < div className={this.state.isComplete && 'is-complete'}>
          <input ref="myInput" value=''/>
        </div>
    );
  }

可以在组件的任何地方使用this.refs.myInput 获取这个引用； 再使用this.refs.myInput.getDOMNode().value，可以获取到这个input 的值

特殊属性

for -> htmlFor class -> className

事件

事件被统一规范使用驼峰式的命名

click -> onClick

react自动绑定了组件所有方法的作用域，因此无需你手动的绑定

JSX与HTML有什么不同

JSX不去尝试遵循任何XML或者HTML规范，JSX作为一种Ecmascript特性去设计的，至于像XML这一事实，只不过大家比较熟悉XML罢了。

JSX使用

基本使用

JSX允许html代码和js 的代码混写在一切，最后通过一个解释器进行转换即可

ReactDOM.render(
  <h1>i am sialvsic</h1>,
  document.getElementById("example")
);

条件判断

最佳实践的方式 在一个组件中若想实现if/else逻辑，如果直接加入if语句，例如：

<div className={if(isComplete){'is-complete'}}>....</div>

是不可以的。

方法：

• 使用三目运算符
• 设置一个变量并在属性中引用它
• 将逻辑转化到函数中
• 使用&&运算符

使用三目运算符

render: function () {
    return (
        < div className={this.state.isComplete ? 'isComplete':''}></div>
    );
  }

使用变量

 getIsComplete:function(){
    return this.state.isComplete ? 'isComplete':'';
  },

  render: function () {
    var isComplete = this.getIsComplete();
    return (
        < div className={isComplete}></div>
    );
  }

使用函数

 getIsComplete:function(){
    return this.state.isComplete ? 'isComplete':'';
  },

  render: function () {
    return (
        < div className={this.getIsComplete()}></div>
    );
  }

使用&&运算符 由于对于null或者false值React不会输出任何内容

  render: function () {
    return (
        < div className={this.state.isComplete && 'is-complete'}></div>
    );
  }

参考

https://facebook.github.io/react/docs/introducing-jsx.html