JavaScript的React框架中的JSX语法学习入门教程(2)

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

该功能需要0.11及以上版本

Javascript表达式

在JSX语法中写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语法只是语法糖，它的背后是调用ReactElement的构造方法React.createElement的，所以类似这样的写法是不可以的：

// This JSX: <div id={if (condition) { 'msg' }}>Hello World!</div> // Is transformed to this JS: React.createElement("div", {id: if (condition) { 'msg' }}, "Hello World!");

可以从转化后的Javascript代码中看出明显的语法错误，所以要不用三目运算符，要不就这样写：

if (condition) <div>Hello World!</div> else <div>Hello World!</div>

传播属性（Spread Attributes）

在JSX中，可以使用...运算符，表示将一个对象的键值对与ReactElement的props属性合并，这个...运算符的实现类似于ES6 Array中的...运算符的特性。

var props = { foo: x, bar: y }; var component = <Component { ...props } />;

这样就相当于：

var component = <Component foo={x} bar={y} />

它也可以和普通的XML属性混合使用，需要同名属性，后者将覆盖前者：

var props = { foo: 'default' }; var component = <Component {...props} foo={'override'} />; console.log(component.props.foo); // 'override'

您可能感兴趣的文章: