“React 中的 JQuery 移动组件”
我对这个概念还很陌生，仍然需要弄清楚。我构建了一个用于移动目的的应用程序，并决定将其包装在 React 组件中。我的代码：
索引.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 已正确创建，它也不会显示为带有标题的 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>
