深入JSX

JSX是一个JavaScript语法的一个扩展,它看起来很像XML.你可以在React里使用JSX语法转换

为什么是JSX

你不一定要在React里使用JSX,你可以使用纯JS,但是,我们建议你使用JSX,因为它提供了简洁,熟悉的语法来定义带有属性的树结构

对于临时发开人员比如设计师来说,JSX更亲切.

XML有标签的打开和闭合.这在树结构较大的时候,比调用函数或对象字面量更容易阅读.

它并不改变JavaScript语法.

HTML标签和React组件

React既可以渲染HTML标签(字符串),也可以渲染React组件(类)

要渲染一个HTML标签,请在JSX中使用小写的标签名:

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

要渲染一个React组件,请创建一个本地变量,以大写字母开头:

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

React的JSX约定: 通过使用大写和小写字母开头命名,来区分本地的组件和HTML标签.

Note: 由于JSX是JavaScript,所以,class和for这类标识符不建议被用于XML的属性名. 取而代之的是,React的DOM建议给DOM元素的属性命名为类似于 classNmae,htmlFor 这样的规则.

转换

React JSX 会把像XML一样的语法转换成原生JavaScript. XML元素,属性,子元素,都会变成参数,传递给 React.createElement.

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

注意,要使用 <Nav /> , 作用域里必须有 Nav 变量.

JSX还可以使用XML语法来定义子元素:

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

当 displayName 属性未被定义的时候, JSX 会通过它赋值的变量名来推断 displayName

// Input (JSX):
var Nav = React.createClass({ });
// Output (JS):
var Nav = React.createClass({displayName: "Nav", });

通过 Babel REPL 来体验JSX是如何变成纯JavaScript的. 还有 HTML to JSX converter 这个网站可以把HTML转换成JSX.

如果你想要使用JSX,Getting Started教程会展示如何设置编译.

Note: JSX表达式最终的结果总是一个ReactElement.实际执行的细节会有一些变化.有一种优化的方法,它可以把ReactElement作为一个对象字面量内联进去,从而避免 React.createElement 的验证代码.

命名空间的组件

如果你要创建一个有很多子元素的组件,比如form,你很可能会需要申明很多变量名.

// Awkward block of variable declarations
var Form = MyFormComponent;
var FormRow = Form.Row;
var FormLabel = Form.Label;
var FormInput = Form.Input;

var App = (
  <Form>
    <FormRow>
      <FormLabel />
      <FormInput />
    </FormRow>
  </Form>
);

为了简化它,命名空间的组件可以使用一个组件以及它的属性来作为它的子组件.

var Form = MyFormComponent;

var App = (
  <Form>
    <Form.Row>
      <Form.Label />
      <Form.Input />
    </Form.Row>
  </Form>
);

要实现这个功能,你只需要创建你的子组件作为父组件的属性就可以了.

var MyFormComponent = React.createClass({ ... });

MyFormComponent.Row = React.createClass({ ... });
MyFormComponent.Label = React.createClass({ ... });
MyFormComponent.Input = React.createClass({ ... });

JSX在编译的时候会正确处理他们.

var App = (
  React.createElement(Form, null,
    React.createElement(Form.Row, null,
      React.createElement(Form.Label, null),
      React.createElement(Form.Input, null)
    )
  )
);

Note: 这个特性只在v0.11及以上被支持.

JavaScript 表达式

属性里的表达式

要在属性里使用JavaScript表达式,把表达式包在 {} 里,而不是 “” 里

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

属性值是一个布尔值

如果一个属性的值被省略了,JSX会认为它的默认值就是 true. 如果要让它的值为 false,就必须要传入表达式, 这在HTML form表单里很常见,比如 disabled required checked readonly 属性等…

// 下面这两种禁用按钮的方式在JSX里是等价的.
<input type="button" disabled />;
<input type="button" disabled={true} />;

// 下面这两种不禁用按钮的方式在JSX里是等价的.
<input type="button" />;
<input type="button" disabled={false} />;

子元素表达式

同样的,JavaScript表达式也可以表示子元素

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

注释

在JSX里添加注释很简单;他们只是JS表达式.有一点需要注意,当你在标签的子元素里使用注释时,使用 {} 把注释内容包起来.

var content = (
  <Nav>
    {/* child comment, put {} around */}
    <Person
      /* multi
         line
         comment */
      name={window.isLoggedIn ? window.name : ''} // end of line comment
    />
  </Nav>
);

Note: JSX和HTML相似,但不完全相同.查看 JSX gotchas ,里面列出了一些常见的坑.

查看原文