html引入react庫，不搭腳手架。
阿新 • • 發佈：2020-11-30
<!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、以及解析成瀏覽器可識別的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 } } }