首先要引进在cdn的几个文件
<script src="https://cdn.bootcss.com/react/0.14.7/react.min.js"></script> <script src="https://cdn.bootcss.com/react/0.14.7/react-dom.min.js"></script> <script src="https://cdn.bootcss.com/babel-standalone/6.22.1/babel.min.js"></script>注意:
/react/0.14.7/react.min.js
react 在0.14.7后不再对ie支持
这里举个栗子,每次做web的时候导航条很多页面都有,且共同。对此不用后端的weigete,我们也可以自己封装一个组件,从而达到weigette的效果
创建导航件,独立一个js文件
react_component.js
var NavMenu = React.createClass({ getInitialState: function() { return { loading: true, data:'' }; }, componentDidMount :function() { $.ajax({ type : "post", url : "http://tpapi.prient.top/api/index/get_all_menu?callback=JSON_CALLBACK", dataType : "jsonp", jsonp: "callback",//传递给请求处理程序或页面的,用以获得jsonp回调函数名的参数名(默认为:callback) success : function(json){ this.setState({data:json}); this.setState({loading:false}); console.info(json) }.bind(this) }); }, componentDidUpdate :function(){ //判断active var url=window.location.pathname; console.info(url); $('.navbar-nav').find('li').each(function(){ var this_url= $(this).find('a').eq(0).attr('href'); if(url=='/'+this_url){ $(this).addClass('active'); } console.info(url); console.info(this_url); }) }, render : function () { if(this.state.loading){ return <div style = {myStyle}>loading...</div> }else{ var menu_list=this.state.data.map(function(item,index){ if(typeof(item.under_menu)!="undefined") { var under_menu=item.under_menu.map(function(n){ return( <li ><a href="#">{n.title}</a></li>); }) return ( <li className="dropdown" key={index}> <a href="react_demo1.html" className="dropdown-toggle" data-toggle="dropdown"> {item.title} <b className="caret"></b></a> <ul className="dropdown-menu"> {under_menu} </ul> </li> ) }else{ return( <li key={index}><a href="react_demo3.html">{item.title}</a></li> ); } }) return( <nav className="navbar navbar-inverse" role="navigation"> <div className="container-fluid"> <div className="navbar-header"> <button type="button" className="navbar-toggle " data-toggle="collapse" data-target="#example-navbar-collapse"> <span className="sr-only">切换导航</span> <span className="icon-bar"></span> <span className="icon-bar"></span> <span className="icon-bar"></span> </button> <a className="navbar-brand" href="#">菜鸟教程</a> </div> <div className="collapse navbar-collapse" id="example-navbar-collapse"> <ul className="nav navbar-nav"> {menu_list} </ul> <div> <ul className="nav navbar-nav navbar-right"> <li><a href="#"><span className="glyphicon glyphicon-user"></span> 注册</a></li> <li className="dropdown"><a href="#" className="dropdown-toggle" data-toggle="dropdown"><span className="glyphicon glyphicon-log-in"></span> 登录 <span className="caret"></span></a> <ul className="dropdown-menu"> <li><a href="#" data-toggle="modal" data-target="#myModal">11</a></li> <li><a href="" data-loading-text="Loading...">22</a></li> <li className="divider"></li> <li><a href="">33</a></li> </ul> </li> </ul> </div> </div> </div> </nav> ); } } })
react_demo1.html
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no"> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="author" content="Jophy" /> <link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.min.css"> <!--[if lt IE 9]> <script src="bootstrap-3.3.7-dist/js/html5shiv.js"></script> <script src="bootstrap-3.3.7-dist/js/respond.min.js"></script> <![endif]--> <script src="bootstrap-3.3.7-dist/js/jquery-1.12.3.js"></script> <script src="bootstrap-3.3.7-dist/js/bootstrap.min.js"></script> <script type="text/javascript" src="bootstrap-3.3.7-dist/js/es5-shim.min.js"></script> <script type="text/javascript" src="bootstrap-3.3.7-dist/js/es5-sham.min.js"></script> <script src="https://cdn.bootcss.com/react/0.14.7/react.min.js"></script> <script src="https://cdn.bootcss.com/react/0.14.7/react-dom.min.js"></script> <script src="https://cdn.bootcss.com/babel-standalone/6.22.1/babel.min.js"></script> </head> <body > <div id="nav"></div> <script type="text/babel" src="bootstrap-3.3.7-dist/js/react_component.js"></script> <script type="text/babel"> //导航主键 ReactDOM.render( <NavMenu java="active"/>, document.getElementById('nav') ); </script> </body> </html>
具体的可以看
http://bootstrap.prient.top/react_demo1.html
http://bootstrap.prient.top/react_demo2.html
引入同样的组件