JSX笔记

阅读数:618 发布时间:2016-05-05 23:20:06

作者:zzl005 标签: React 朱忠来005 jsx

是什么

为什么

React作者强烈建议我们使用JSX,因为JSX在定义类似HTML这种树形结构时,十分的简单明了。简明的代码结构更利于开发和维护

使用jsx

React.render渲染HTML结构时,申明变量采用首字母小写

var myDivElement = <div className="foo" />;  
React.render(myDivElement, document.body);

React.render渲染React组件时,申明变量采用首字母大写

var MyComponent = React.createClass({/*...*/});
var myElement = <MyComponent someProperty={true} />;
React.render(myElement, document.body);

React 的 JSX 使用大、小写的约定来区分本地组件的类和 HTML 标签。

XML标签如何转化为jsx

一个XML标签:

var app = <Nav color="blue"><Profile>click</Profile></Nav>;

会被转化为:

var app = React.createElement(  
    Nav,  
    {color:"blue"},  
    React.createElement(Profile, null, "click")  
);  

一个XML标签,实质上就是在调用 React.createElement 这个方法,并返回一个 ReactElement 对象。

注释

同JavaScript注释一样

单行注释 // comments
多行注释 /* comments */

相关文章推荐: