Question

＆＃34; React中的JQuery Mobile组件＆＃34;

我对这个概念很陌生，仍需要解决问题。我构建了一个用于移动目的的应用程序，并决定将其包装在React组件中。我的代码：

的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 //反应组件

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'))

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

继承我的问题：

JQM可能不知道React创建的虚拟DOM，并且在容器div之外创建了一个初始页面。即使正确创建了DOM，它也不会显示为带有Header的JQM页面。

有人经历过同样的事吗？

提前致谢。

编辑：如果它有任何帮助 - ＆gt;这是在运行时

期间创建的

    <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>

Answer 1

更新

应用以下样式以移除页面中的额外高度并使其适合 viewport ，因为 pagecontainer 不再是body。

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

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

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

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

<强> Demo

React中的JQuery Mobile组件

1 个答案:

更新