编写稍微复杂的JSX, 就要使用到下面的一些概念。只要理解了这些，再复杂的结构也都会非常的游刃有余。
1、求值表达式
要使用 JavaScript 表达式作为属性值，只需把这个表达式用一对大括号 ( { } ) 包起来，不要用引号 ( " " )。在编写JSX时，在 { } 中不能使用语句（if语句、for语句等等），但可以使用求值表达式，这本身与 JSX没有多大关系，是JS中的特性，它是会返回值的表达式。我们不能直接使用语句，但可以把语句包裹在函数求值表达式中运用。
2、条件判断的写法
你没法在JSX中使用 if-else 语句，因为 JSX 只是函数调用和对象创建的语法糖。在 { } 中使用，是不合法的JS代码，不过可以采用三元操作表达式
var HelloMessage = React .createClass({
render: function () {
return <div> Hello {this. props.name ? this. props.name : "World"} </div> ;
}
});
ReactDOM. render(< HelloMessage name ="xiaowang" />, document .body);
可以使用比较运算符“ || ”来书写，如果左边的值为真，则直接返回左边的值，否则返回右边的值，与if 的效果相同。
var HelloMessage = React .createClass({
render: function () {
return <div> Hello {this. props.name || "World"} </div> ;
}
});
3、函数表达式
()有强制运算的作用
var HelloMessage = React .createClass({
render: function () {
return <div> Hello {
(function (obj) {
if ( obj.props .name)
return obj.props .name
else
return "World"
}( this))
} </div >;
}
});
ReactDOM .render (< HelloMessage name= "xiaowang" />, document. body);
外括号“ )”放在外面和里面都可以执行。唯一的区别是括号放里面执行完毕拿到的是函数的引用，然后再调用 “function(){}(this)()”；括号放在外面的时候拿到的事返回值。
4、数组递归
数组循环，数组的每个元素都返回一个React 组件。
var lis = this .todoList .todos .map (function (todo ) {
return (
< li>
< input type= "checkbox" checked={ todo. done} >
< span className={ 'done-' + todo. done} >{ todo. text} </span >
</ li>
);
});
var ul = (
< ul className= "unstyled">
{ lis}
</ ul>
);
