重点在this.pros.属性
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<script src="dist/browser.min.js"></script>
<script src="dist/jquery.js"></script>
<script src="dist/react.js"></script>
<script src="dist/react-dom.js"></script>
</head>
<body>
<div id="root">
</div>
<script type="text/babel">
/*
组件:
组件中只能存在一个根容器
组件与组件之间可以互相嵌套
组件本身可以具有业务逻辑
*/
var Nav = React.createClass({
render:function(){
return(
<div>
<ul>
{
this.props.navData.map(function(item,index){
return(
<li key={index}><a href="#">{ item }</a></li>
)
})
}
</ul>
</div>
)
}
})
var Root = React.createClass({
render:function(){
var nav1 = ["百度","谷歌"]
var nav2 = ["新闻","地图"]
return(
<div>
<Nav navData={nav1}/>
<Nav navData={nav2}/>
</div>
)
}
})
ReactDOM.render(<Root />,document.getElementById("root"))
</script>
</body>
</html>