个人中心
gpt4 book ai didi

jquery - React JS 和 jQuery 移动渲染

转载 作者：太空宇宙 更新时间：2023-11-04 03:33:07 25 4
gpt4 key购买 nike

我正在尝试呈现 jQuery Mobile 样式的列表，但使用的是 React JS。不幸的是，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>

enter image description here

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

谢谢，安吉塔纳

最佳答案

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

jquery mobile inspect element on popup container

从那里您可以在 React 或任何其他没有 jQuery 或 jQuery Mobile JavaScript 的 ui 库中复制这些类(例如 ui-popup-container)和额外的状态类(例如 in、pop、ui-popup-active)。

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

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

关于jquery - React JS 和 jQuery 移动渲染，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26012564/

25 4 0
文章推荐： c - 在c中单独列出插入函数
文章推荐： python - 使用 scipy 在稀疏矩阵上分组
文章推荐： c - 初始化带有数组的结构时出现段错误
文章推荐： python - 随机生成图像
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com