html引入react庫，不搭腳手架。

本文轉載自查看原文 2020-11-30 15:40 425 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
        }

    }
}

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 react腳手架引入typescript 如何自己搭一個腳手架 React 腳手架 react腳手架搭建命令 react常用庫 React -- 腳手架書寫react React: React腳手架 react腳手架搭建及配置從零學腳手架(五)---react、browserslist React快速構建腳手架創建react腳手架(項目）