在React中使用JSX

《使用React编写简单的时钟组件》中,html是这样生成的:

1
React.DOM.p(null,now.format('H:mm:ss'));

我们可以把这个写法,改为使用JSX的方式,示例见这里

主要需要修改的地方为:

引用JSX库:

1
<script src="bower_components/react/JSXTransformer.js"></script>

使用JSX的代码:

1
2
3
4
5
6
7
8
9
<script type="text/jsx">
var ClockWidget = React.createClass({
render: function() {
var now=moment();
return <p>{now.format('H:mm:ss')}</p>
}
});
...
</script>

这里的type需要改为text/jsx而不是text/javascript

1
<script type="text/jsx">

遇到html的地方,可直接写静态html,如果有变量,用花括号圈起来:

1
<p>{now.format('H:mm:ss')}</p>