React JSX语法

 2016年01月20日    719     声明


JSX即 JavaScript XML,是一种在React组件内部构建标签的类XML语法。组件在React中,是用于分离关注点,而非模板或处理显示的逻辑。虽然React不使用JSX同样可以工作,但官方更建议使用JSXJSX借签了XML标签打开与关闭的优点,提高了组件及复合组件的可读性。JSX中可以直接使用HTML标签,赋予React强大的表现能力的同时,也方便更多开发人员参与开发。


  1. HTML标签与React组件
  2. JSXJavaScript
  3. JSX与JavaScript表达式


1. HTML标签与React组件

React即可以渲染HTML标签,也可以渲染React组件JSX语法约定了分别使用首字母大小写,来区分本地组的类和HTML标签:

  • HTML标签,标签名以小写字母开头
  • React组件,标签名以大写字母开头

如,渲染HTML标签,JSX中以小写字母开头:

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

渲染React 组件,组件名是一个以大写字母开头的本地变量:

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


JSX是对JavaScript的扩展,它并没有修改JavaScript的语义。React脱离JSX也可以正常工作。

如,使用JSX时:

React.render(
  <div>
    <div>
      <div>content</div>
    </div>
  </div>,
  document.getElementById('example')
);

不使用JSX 时:

React.render(
  React.createElement('div', null,
    React.createElement('div', null,
      React.createElement('div', null, 'content')
    )
  ),
  document.getElementById('example')
);

注意:

由于 JSX 就是 JavaScript,一些标识符像 classfor 不建议作为 XML 属性名。作为替代,React DOM 使用 classNamehtmlFor 来做对应的属性。


2. JSXJavaScript

实际上,JSX最终会把类XML的语法转成原生JavaScriptXML的元素、属性、子节点,会被转换成React.createElement()方法的参数:

var Nav;
// 输入 (JSX):
var app = <Nav color="blue" />;
// 输出 (JS):
var app = React.createElement(Nav, {color:"blue"});

createElement()最终会返回一个ReactElement对象,实际我们所编写的XML标签都会调用createElement()方法并最终转化为一个ReactElement对象,这样JSX语法也就被转换成了JavaScript语法。


createElement()语法结构

ReactElement createElement(
  string/ReactClass type,
  [object props],
  [children ...]
)

该方法创建并返回一个ReactElement对象,其参数如下:

  • type,可以是一个HTML标签或是一个React组件
  • props,可选参数,表示对象的属性
  • children,第三个参数及其后的参数都会被认为是元素的子元素

理解createElement()语法后,我们来看一个JSX定义XML式的子节点的示例:

var Nav, Profile;
// 输入 (JSX):
var app = <Nav color="blue"><Profile>click</Profile></Nav>;
// 输出 (JS):
var app = React.createElement(
  Nav,
  {color:"blue"},
  React.createElement(Profile, null, "click")
);


3. JSX与JavaScript表达式

React保留了JavaScript的语义,在JSX语法中支持以下几种形式的表达式。要使用{}包括,而不能使用""

属性(特性)表达式

JSX使用JavaScript的属性表达式做为属性值时:

// 输入 (JSX):
var person = <Person name={window.isLoggedIn ? window.name : ''} />;
// 输出 (JS):
var person = React.createElement(
  Person,
  {name: window.isLoggedIn ? window.name : ''}
);


子节点表达式

JavaScript表达式也可以用于描述子节点:

// 输入 (JSX):
var content = <Container>{window.isLoggedIn ? <Nav /> : <Login />}</Container>;
// 输出 (JS):
var content = React.createElement(
  Container,
  null,
  window.isLoggedIn ? React.createElement(Nav) : React.createElement(Login)
);


注释

JSX的注释要在标签的子节点内使用:

var content = (
  <Nav>
    {/* 一般注释, 用 {} 包围 */}
    <Person
      /* 多
         行
         注释 */
      name={window.isLoggedIn ? window.name : ''} // 行尾注释
    />
  </Nav>
);