React-JS和jQuery移动渲染
我试图使用React JS呈现jQuery Mobile风格的列表。不幸的是，React JS没有呈现jQuery移动组件的风格。因此，这些按钮显示为普通的HTML按钮，就像我将HTML直接放在DOM中一样，它以jQuery Mobile风格呈现 下面是我的代码和截图，以供比较：React-JS和jQuery移动渲染,jquery,css,html,jquery-mobile,reactjs,Jquery,Css,Html,Jquery Mobile,Reactjs,我试图使用React JS呈现jQuery Mobile风格的列表。不幸的是，React JS没有呈现jQuery移动组件的风格。因此，这些按钮显示为普通的HTML按钮，就像我将HTML直接放在DOM中一样，它以jQuery Mobile风格呈现 下面是我的代码和截图，以供比较： <!DOCTYPE HTML> <html> <head> <meta charset='UTF-8'> <link rel="stylesheet" href="
<!DOCTYPE HTML>
<html>
<head>
<meta charset='UTF-8'>
<link rel="stylesheet" href="../jqueryMobile/jquery.mobile.css">
<script src='../libs/react.js'></script>
<script src='../libs/JSXTransformer.js'></script>
<script src="../jquery/jquery.js"></script>
<script src="../jqueryMobile/jquery.mobile.js"></script>
<script src="scripts/shoppingItems.js"></script>
<!--<li><a href="#">
<img src="images/book.png">
<h2>Broken Bells</h2>
<p>Broken Bells</p>
<p style="font-weight:bold">Books</p>
</a>
</li> -->
<script type="text/jsx">
/** @jsx React.DOM */
var SearchProductsBar = React.createClass({
handleChange: function()
{
this.props.onUserInput(
this.refs.filterTextInput.getDOMNode().value
);
},
render: function()
{
return(
<input type="text" placeholder="Search Products" style={{width:'100%'}} ref="filterTextInput" onChange={this.handleChange}/>
);
}
});
var mainDivStyle = {width:'100%',color:'blue',backgroundColor:'#D5D1FF'};
var divStyle1={
width:'30%',
float:'left',
display:'inline',
paddingTop:'30px',
paddingLeft:'2%'
};
var divStyle2={
width:'65%',
float:'left',
display:'inline',
paddingLeft:'2%'
};
var imageStyle={
width:'100%',
height:'80px',
maxWidth:'80px'
};
var ListItem = React.createClass({
render: function()
{
var productItemObject = this.props.itemDetails;
return(
<div style={mainDivStyle}>
<a href='#myShoppingCartHomePage2' style={{textDecoration:'none'}}>
<div style={divStyle1}>
<img src={productItemObject.image} style={imageStyle}/>
</div>
<div style={divStyle2}>
<h4>{productItemObject.name}</h4>
<h5>{productItemObject.price} INR</h5>
<p style={{fontWeight:'bold'}}>{productItemObject.category}</p>
</div>
</a>
<input type="button" value="Add To Cart" />
<p>_________</p>
</div>
);
}
});
var ProductsTable = React.createClass({
render:function()
{
var productList = this.props.productList;
var rows = [];
productList.forEach(function(productItem){
if(productItem.name.indexOf(this.props.filterText) === -1)
{
return;
}
rows.push(<ListItem itemDetails={productItem}/>);
}.bind(this));
return(
<span>
<div id="myItemListHeader" style={{fontWeight:'bold'}}>Products:</div>
{rows}
</span>
);
}
});
var ShoppingApp = React.createClass({
handleUserInput: function(fiterText)
{
this.setState({
filterText: fiterText
});
},
getInitialState: function()
{
return{
filterText: ''
};
},
render: function()
{
return(
<span>
<SearchProductsBar filterText={this.state.filterText} onUserInput={this.handleUserInput}/>
<ProductsTable filterText={this.state.filterText} productList={this.props.products}/>
</span>
);
}
});
React.renderComponent(<ShoppingApp products={shoppingItemsObject.items} />, document.getElementById('myItemList'));
</script>
<title>Shopping Cart App</title>
</head>
<body>
<div id="myShoppingCartHomePage" data-role="page">
<div data-role="header" style="text-align:center;">MyShopping App</div>
<div data-role="content">
<input type="button" value="Add To Cart" />
<div id="myItemList">
</div>
</div>
<div data-role="footer" style="text-align:center;">Shopping Cart</div>
</div>
<div id="myShoppingCartHomePage2" data-role="page">
This it the second page
</div>
</body>
</html>
/**@jsx React.DOM*/
var SearchProductsBar=React.createClass({
handleChange:function（）
{
这个.props.onUserInput(
此.refs.FilterTestInput.getDOMNode（）值
);
},
render:function（）
{
返回(
);
}
});
var mainDivStyle={width:'100%'，color:'blue'，backgroundColor:'#D5D1FF'}；
变量divStyle1={
宽度：'30%'，
浮动：'左'，
显示：'inline'，
paddingTop:'30px'，
填充左：“2%”
};
变量divStyle2={
宽度：'65%'，
浮动：'左'，
显示：'inline'，
填充左：“2%”
};
var图像样式={
宽度：'100%'，
高度：'80px'，
最大宽度：'80px'
};
var ListItem=React.createClass({
render:function（）
{
var productItemObject=this.props.itemDetails；
返回(
_________
);
}
});
var ProductsTable=React.createClass({
render:function（）
{
var productList=this.props.productList；
var行=[]；
productList.forEach（函数（productItem）{
if（productItem.name.indexOf（this.props.filterText）=-1）
{
返回；
}
rows.push（）；
}.约束（这个）；
返回(
产品：
{rows}
);
}
});
var ShoppingApp=React.createClass({
handleUserInput：函数（fiterText）
{
这是我的国家({
过滤文本：过滤文本
});
},
getInitialState:函数（）
{
返回{
筛选器文本：“”
};
},
render:function（）
{
报税表（
);
}
});
React.renderComponent（，document.getElementById（'myItemList'））；
购物车应用程序
MyShopping应用程序
购物车
这是第二页
Ankit Tanna看看jQuery Mobile使用的类名。您需要转到他们的演示，并检查元素 从那里，您可以复制这些类（例如，ui弹出容器），以及React或任何其他不带jQuery或jQuery Mobile JavaScript的ui库中的额外状态类（例如，in、pop、ui弹出活动） 就按钮而言，我相信它只是
或者，您可以尝试在componentDidMount中使用
jQuery（this.getDOMNode（））.somejQueryMobileFunction（）