React中的JQuery移动组件

本文介绍了React中的JQuery移动组件的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

"React中的JQuery移动组件"

"JQuery Mobile Components in React"

我对这个概念还很陌生，仍然需要弄清楚.我构建了一个用于移动目的的应用程序，并决定将其包装在React组件中.我的代码:

I'm quite new to this concept an still need to figure things out. I built an app for mobile purposes and decided to wrap it in React components. My Code:

index.html

<!DOCTYPE html>

<html lang="de" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>shounds</title>

    <link rel="stylesheet" type="text/css" href="css/jquery.mobile.squareui.css" />
    <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>

    <script src="./ext/react.js"></script>
    <script src="./ext/jsx-transform.js"></script>
    <script src="//fb.me/react-with-addons-0.11.0.js"></script>
</head>
<body data-theme="e">
    <div id="container" >
        <!--<div data-role="page" id="login"><div data-role="header" id="loginHeader"></div></div>-->
    </div>
    <script type="text/jsx" src="./comp/main.js"></script>
</body>
</html>

main.js//反应组件

main.js //react components

var App = React.createClass({
    render: function () {
        return Page({id: 'login'});
    }
})

var Page = React.createClass({
    constants: { dataTheme: 'e' },
    render: function () {
        return React.DOM.div({ id: this.props.id + 'Page', 'data-role': 'page', 'data-theme': this.constants.dataTheme },
            Header({ dataTheme: this.constants.dataTheme, id: this.props.id }))
    }
})

var Header = React.createClass({
    render: function(){
        return React.DOM.div({'data-role': 'header', 'data-theme': this.props.dataTheme, id: this.props.id+'Header' })
    }
})


// Render application.
    React.render(App(null), document.getElementById('container'))

按预期在容器div中创建DOM.

The DOM gets created in the container div as expected.

这是我的问题:

JQM可能不知道React会创建虚拟DOM，而是在容器div之外自行创建初始页面.即使DOM创建正确，它也不会显示为带有Header的JQM页面.

JQM probably isnt aware of the virtual DOM getting created by React and creates an initial page by itsself outside the container div. Even though the DOM is created correctly it wont be displayed as JQM page with Header.

有人经历过同样的事情吗?

Anyone gone through the same stuff?

谢谢.

如果有任何帮助->这是在运行时创建的内容

if it helps in any way -> this is what is created during runtime

    <head></head>
    <body class="ui-mobile-viewport ui-overlay-a" data-theme="e">
        <div class="ui-page ui-page-theme-a ui-page-active" data-role="page" data-url="/E:/dev/workspace/visual/shounds/index.html" tabindex="0" style="min-height: 483px;">
            <div id="container">
                <div id="loginPage" data-reactid=".0" data-theme="e" data-role="page">
                    <div id="loginHeader" data-reactid=".0.0" data-theme="e" data-role="header"></div>
                </div>
            </div>
            <script src="./comp/main.js" type="text/jsx"></script>
        </div>
        <div class="ui-loader ui-corner-all ui-body-a ui-loader-default"></div>
    </body>

</html>

更新

由于 pagecontainer 不再是body，因此应用以下样式来删除页面中的额外高度并使其适合 viewport .

Update

Apply the following styles to remove extra height in page and make it fit viewport, since pagecontainer is no longer body.

.ui-mobile body {
  height: auto; /* reset height */
}
#container {
  height: 99.9%; /* new viewport (pagecontainer) */
}

第一步，您必须通知框架(jQuery Mobile)您要使用与默认body不同的页面包装器(:mobile-pagecontainer).另外，您应该禁用jQuery Mobile的自动初始化，直到 React 呈现页面并推送到DOM中.这些步骤应在mobileinit上执行，这是在初始化jQuery Mobile之前触发的第一个事件.另外，请注意，应在head中将其放置在jQuery Core之后和jQuery Mobile之前.

First step, you have to inform framework (jQuery Mobile) that you want to use a different pages wrapper (:mobile-pagecontainer) than the default body. Also, you should disable auto-initialization of jQuery Mobile's until React renders the page and push into DOM. Those steps should be executed on mobileinit which is the first event that fires before jQuery Mobile is initialized. Also, note that is should be placed after jQuery Core and before jQuery Mobile in head.

$(document).on("mobileinit", function(e, data) {
  $.mobile.autoInitializePage = false; /* disable auto-initialization */
  $.mobile.pageContainer = $("#container"); /* set new "pagecontainer" */
});

然后，运行 React 代码，然后运行$.mobile.initializePage();初始化框架.

After that, run your React code followed by $.mobile.initializePage(); to initialize framework.

这篇关于React中的JQuery移动组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！

Mobile