<!DOCTYPE html> <html lang="en"> <head> <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" charset="utf-8"> <title>Title</title> <link rel="stylesheet" href="css/login.css"> </head> <body> <div id="root"></div> <script src="js/util/react.development.js" ></script> <script src="js/util/react-dom.development.js"></script> <script src="js/util/babel.min.js"></script> <script src="js/util/jquery-3.2.1.min.js"></script> <script src="js/config/urlconfig.js"></script> <script src="js/config/ajaxUtil.js"></script> <script src="js/component/main.js" type="text/babel"></script> <script src="js/component/login.js" type="text/babel"></script> <script src="js/component/page.js" type="text/babel"></script> <script type="text/babel" > ReactDOM.render( <Pageindex />, document.getElementById('root') ); </script> </body> </html>
react 必须引入react、react-dom、以及将jsx语法转换为js的babel。一旦引入，js里可直接调用react 对象，无需导入。
//用户登陆判断
class Pageindex extends React.Component { constructor(props) { super(props); this.state={ isBindwechat:-1 } } componentDidMount(){ this.getAuthorization(); } getToken=()=>{ } getAuthorization=()=>{ var openId=""; sessionStorage.setItem("openid",openId); var that=this; posturlNetWork(url_.getAuthorization,"openId="+openId,function (data) { if(data.code==4000){ that.setState({ isBindwechat: 0 }) } else if(data.code=1000){ //存储token sessionStorage.setItem(companyCode+"daying", data.data.Authorization); //用来做心跳包使用 sessionStorage.setItem("accountId", data.data.userInfo.id); Authorization_Str=data.data.Authorization; userName=data.data.userInfo.name; that.setState({ isBindwechat: 1 }) } }) } render() { if(this.state.isBindwechat==1){ return <PageMain/>; } else if(this.state.isBindwechat==0){ return <LoginBind/> } else{ return null } } }