首页 > 代码库 > React实例2-组件

React实例2-组件

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>nested components</title>
<script src="http://www.mamicode.com/build/browser.min.js"></script>
<script src="http://www.mamicode.com/build/react.js"></script>
<script src="http://www.mamicode.com/build/react-dom.js"></script>
<script type="text/babel">
var MessageBox = React.createClass({
render: function(){
var submessages = [];
for(var ii=0; ii<10; ii++){
submessages.push(
<Submessage key={‘subMsg‘+ii}/>
);
}
return (
<div>
<h1>你好世界!</h1>
{submessages}
</div>
);
}
});

var Submessage = React.createClass({
render: function(){
return (
<div>
<h3>React很有趣</h3>
<Footer/>
</div>);
}
});

var Footer = React.createClass({
render: function(){
return (
<small>因为我们用代码创造世界</small>
);
}
});

ReactDOM.render(<MessageBox/>,
document.getElementById(‘app‘),
function(){
console.log(‘渲染完成啦‘)
});
</script>
</head>

<body>

<div id="app"></div>
</body>
</html>

React实例2-组件