zoukankan      html  css  js  c++  java
  • html引入react库,不搭脚手架。

    <!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 } } }
  • 相关阅读:
    从Object对象中读取属性的值
    CentOS7安装Mysql
    CentOS初使用命令总结
    linux安装git、node、pm2
    将 ELASTICSEARCH 写入速度优化到极限
    Elasticsearch
    elasticsearch5.0.1集群索引分片丢失的处理
    ELASTICSEARCH健康red的解决
    使用linux远程登录另一台linux
    fiddler构造表单上传文件的请求
  • 原文地址:https://www.cnblogs.com/yangqing22/p/14061662.html
Copyright © 2011-2022 走看看