“React 中的 JQuery 移动组件”
我对这个概念还很陌生，仍然需要弄清楚。我构建了一个用于移动目的的应用程序，并决定将其包装在 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// react 组件
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 已正确创建，它也不会显示为带标题的 JQM 页面。
有人经历过同样的事情吗？
提前致谢。
编辑:如果有任何帮助 -> 这是在运行时创建的内容
<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>
最佳答案
更新
应用以下样式来删除页面中的额外高度并使其适合视口(viewport)，因为pagecontainer不再是body。
.ui-mobile body {
height: auto; /* reset height */
}
#container {
height: 99.9%; /* new viewport (pagecontainer) */
}
第一步，您必须通知框架 (jQuery Mobile) 您想要使用与默认 不同的页面包装器 (。另外，您应该禁用 jQuery Mobile 的自动初始化，直到 React 渲染页面并推送到 DOM 中。这些步骤应该在 :mobile-pagecontainer)正文mobileinit 上执行，这是在初始化 jQuery Mobile 之前触发的第一个事件。另请注意，应将其放置在 head 中的 jQuery Core 之后和 jQuery Mobile 之前。
$(document).on("mobileinit", function(e, data) {
$.mobile.autoInitializePage = false; /* disable auto-initialization */
$.mobile.pageContainer = $("#container"); /* set new "pagecontainer" */
});
之后，运行您的 React 代码，然后运行 $.mobile.initializePage(); 来初始化框架。
关于javascript - React 中的 JQuery 移动组件，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26919289/