React JS和jQuery Mobile Rendering

问题描述：

我想呈现一个jQuery Mobile风格的列表，但使用React JS。不幸的是，React JS没有渲染jQuery Mobile组件的风格。因此按钮显示为纯HTML按钮，就像我直接将HTML放在DOM中一样，它将它呈现在jQuery Mobile Style中。React JS和jQuery Mobile Rendering

下面是我的代码和截图进行比较：

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

enter image description here

有没有办法使用JS作出反应呈现jQuery Mobile的组件？

感谢， ANKIT塔纳

答

看那类名jQuery Mobile的使用。你需要去他们的演示，并检查元素。

jquery mobile inspect element on popup container

从那里，你可以复制这些类（如UI的弹出容器），以及额外的状态类（在例如，弹出，用户界面，弹出激活）内的反应，或任何其他UI库，而不jQuery或jQuery Mobile JavaScript。

在按钮的情况下，我相信这只是<button className="ui-btn">

或者，你可以尝试只是componentDidMount使用jQuery(this.getDOMNode()).somejQueryMobileFunction()。如果函数移动元素，删除它们等，这将不起作用。如果它只是改变样式和类，它应该没问题，但在某些边缘情况下可能会与您的代码发生冲突。

嘿，这个工程。但是，它不会导入对知道jQM组件的类名的依赖。我知道它在文档中可用。 – 2014-09-24 10:54:34

非常感谢这个解决方案:) – 2014-09-24 10:55:20

React JS和jQuery Mobile Rendering

相关推荐