Question

我正在尝试使用React JS呈现jQuery Mobile样式列表。不幸的是，React JS没有呈现jQuery Mobile组件的风格。因此，按钮显示为纯HTML按钮，就好像我将HTML直接放在DOM中，它以jQuery Mobile Style呈现它。

以下是我的代码和截图供比较：

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

有没有办法使用React JS渲染jQuery Mobile组件？

谢谢， Ankit Tanna

Answer 1

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

jquery mobile inspect element on popup container

从那里你可以复制那些类（例如ui-popup-container），以及在React或任何其他没有jQuery或jQuery Mobile JavaScript的ui库中的额外状态类（例如，in，pop，ui-popup-active）。

对于按钮，我认为它只是<button className="ui-btn">

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

React JS和jQuery Mobile Rendering

1 个答案: