<html>
<head>
<title>组件的组合调用</title>
<script src="build_0.13/react.min.js"></script>
<script src="build_0.13/JSXTransformer.js"></script>
</head>
<body>
<div id="e"></div>
<script type="text/jsx">
//定义一个Search组件
var Search = React.createClass({
render:function(){
return (
<div>
{this.props.searchType}:
<input type="text" />
<button>Search</button>
</div>
);
}
});
//定义一个Page组件
var Page = React.createClass({
render:function(){
return (
<div>
<h1>Welcome!</h1>
<Search searchType="Title" />
<Search searchType="Content" />
</div>
)
}
});
React.render(
<Page />,
document.getElementById('e')
);
</script>
</body>
</html>
效果图如下：