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