<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>nested components</title>
<script src="build/browser.min.js"></script>
<script src="build/react.js"></script>
<script src="build/react-dom.js"></script>
<script type="text/babel">
var MessageBox = React.createClass({
getInitialState:function(){
return {
isVisible:true,
titleMessage:'你好世界(来自state哦)'
}
},
render:function(){
var styleObj={
display:this.state.isVisible?'block':'none'
};
return (
<div>
<h1 style={styleObj}>{this.state.titleMessage}</h1>
<Submessage/>
</div>
);
}
});
var Submessage = React.createClass({
render:function(){
return (
<h3>React很有趣</h3>
);
}
});
ReactDOM.render(<MessageBox/>,document.getElementById('app'));
</script>
</head>
<body>
<div id="app"></div>
</body>
</html>