React JS 和 jQuery Mobile 渲染答案

【问题标题】：React JS and jQuery Mobile RenderingReact JS 和 jQuery Mobile 渲染
【发布时间】：2014-11-18 16:34:44
【问题描述】：

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

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

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

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

谢谢，安吉坦纳

【问题讨论】：

标签： jquery css html jquery-mobile reactjs

【解决方案1】：

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

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

就按钮而言，我相信只是<button className="ui-btn">

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

【讨论】：

嘿，这行得通。但是它不是依赖于知道 jQM 组件的类名。我知道它在文档中可用。
非常感谢这个解决方案:)