var navBar = React.createClass({
render: function (){
return <ul>{nav_li}</ul>
}
})
createClass
创建react组件对应的类,描述组件的各种行为,render函数是必须实现的,表示渲染什么内容
下面来看我们的代码,接着前面封装导航栏组件
nav.js
// 创建组件
var NavBar = React.createClass({
liClick: function () {
alert('组件');
},
render: function(){
return <ul><li><a href="">最新电影</a></li><li><a href="" onClick={function(){alert('组件')}}>最新评论</a></li></ul>
}
});
ReactDOM.render(
// 使用组件
<NavBar />,
document.getElementById("navbar")
);
NavBar
就是我们定义的组件,使用是方式是<NavBar />
这里我暂时不编译,在页面上引用nav.js
<script type="text/babel" src="src/nav.js"></script>
index.html代码:
<!DOCTYPE html>
<html>
<head>
<title>初始</title>
<meta charset="utf-8">
<script src="build/react.js"></script>
<script src="build/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
<style type="text/css">
*{padding: 0;margin: 0}
#navbar{position: fixed;width: 100%;height: 60px;background-color: #222;}
#navbar li{float: left;line-height: 60px;margin-left: 10px;display: inline-block;}
#navbar li a{color: #fff;text-decoration: none;}
</style>
</head>
<body>
<div id="navbar"></div>
<div id="container"></div>
<div id="footer"></div>
<script type="text/babel" src="src/nav.js"></script>
</body>
</html>
预览效果: