html引入react库，不搭脚手架。

2023-11-09 00:40•Java教程•阅读 2339

<!DOCTYPE html>
<html >
<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 ></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 open;
        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
        }

    }
}