React リストバーとショッピングカートコンポーネントの使用の詳細な説明

'react' から React をインポートします。
'axios' から axios をインポートします。
'../smallPage/GoBack' から GoBack をインポートします。
'../../Assets/css/storeDetail.css' をインポートします。
'../../Mock/MenuList' から MenuList をインポートします。
'../menuPage/Order' から Order をインポートします。
'../menuPage/Evaluate' から Evaluate をインポートします。
'../menuPage/Business' から Business をインポートします。

クラスStoreDetailはReact.Componentを拡張します。
    コンストラクタ(props) {
        スーパー(小道具);
        この状態 = {  
            食べ物:null、
            メニューリスト:メニューリスト
        };
    }
    コンポーネントマウント(){
        axios.get("/food").then((res)=>{
            this.setState({
                食品:res.data.結果データ
            });
            console.log(this.state.food);
        });
    }
    ユーザー選択=(インデックス)=>{
        メニューリスト.forEach((val,key)=>{
            val.isshow=false;
            if(キー===インデックス){
                val.isshow=true;
            }
        });
        this.setState({
            メニューリスト:メニューリスト
        });
    }
    与える（） {
        戻る （
            this.state.food?
                <div>
                    <GoBack title={this.state.food.poi_info.name}/>
                    <div className="foodimage">
                        <img src={this.state.food.poi_info.pic_url} alt=""/>
                        <img src={this.state.food.poi_info.head_pic_url} alt=""/>
                        <span>{this.state.food.poi_info.name}</span>
                    </div>
                    <div>
                        <ul className="メニューリスト">
                            {
                                this.state.menulist.map((値,インデックス)=>{
                                    戻る （
                                        <li キー = {index} onClick = {this.userSelect.bind(this,index)}>
                                            {値.タイトル}
                                            <span className={value.isshow?'foodline':''}></span>
                                        </li>
                                    ）
                                })
                            }
                        </ul>
                    </div>
                    {
                        this.state.menulist.map((値,インデックス)=>{
                            if(value.isshow&&index===0){
                                戻り値 <Order toprice={this.state.food.poi_info.shipping_fee_tip} orderlist={this.state.food.food_spu_tags} key={index}/>
                            }そうでない場合、value.isshow&&index===1 の場合{
                                戻り値 <キー={index} を評価/>
                            }そうでない場合、value.isshow&&index===2{
                                <ビジネスキー={index}/> を返します
                            }それ以外{
                                戻る '';
                            }
                        })
                    }
                </div>
            :''
        );
    }
}

デフォルトの StoreDetail をエクスポートします。

'react' から React をインポートします。
'../../Assets/css/order.css' をインポートします。
'../smallPage/AddCut' から AddCut をインポートします。
'../smallPage/Cart' から Cart をインポートします。

クラスOrderはReact.Componentを拡張します。
    コンストラクタ(props) {
        スーパー(小道具);
        この状態 = {  
            リスト：[]、
            左インデックス:0
        };
    }
    右スクロール=(e)=>{
        scrolltop=e.target.scrollTop とします。
        listheight=this.state.list とします。
        for(let i=0;i<listheight.length-1;i++){
            if(スクロールトップ<リスト高さ[i]){
                // スライドするときに、配列の最初のセットを取得し、インデックス値を変更します this.setState({
                    左インデックス:i
                });
                壊す;
            }それ以外の場合(スクロールトップ>=リストハイト[i]&&スクロールトップ<リストハイト[i+1]){
                // 右のスライド値が全体の高さの半分より大きい場合、左のインデックスを下げる必要があります if (i+1>=listheight.length/2) {
                    // 左側の ul を取得し、その scrollTop を下に移動します。this.refs.leftul.scrollTop=listheight[i+1];
                }それ以外{
                    // scrollTop を上に移動します this.refs.leftul.scrollTop=0;
                }
                this.setState({
                    左インデックス:i+1
                });
                壊す;
            }
        }
    }
    // ユーザーがクリックすると、現在のインデックスの色を変更します userClick=(index)=>{
        this.setState({
            左インデックス:インデックス
        });
        this.refs.order_scroll.scrollTop=index-1>=0?this.state.list[index-1]:0;
    }
    コンポーネントマウント(){
        order_block を document.getElementsByClassName("order_block"); とします。
        listinfo=this.state.list; とします。
        // div をループし、各 div のオフセットを取得し、それを this.state にプッシュして変更して表示します。変更後、listinfo を取得します。
        // 最初のdivの場合は、そのdivのオフセットのみを取得します。それ以外の場合は、そのdivのオフセット+ listinfo[i-1]を取得します。 for(let i=0;i<order_block.length;i++){
            もし(i===0){
                listinfo.push(order_block[i].offsetHeight);
            }それ以外{
                listinfo.push(order_block[i].offsetHeight+listinfo[i-1]);
            }
        }
        this.setState({
            リスト:リスト情報
        });
        // console.log(listinfo); (11) [550, 612, 1284, 1712, 2628, 5496, 7083, 8609, 9099, 9465, 10747]
    }
    // 子コンポーネント Cart で強制更新メソッドを呼び出し、AddCut コンポーネントでメソッドを実行します refComponent=()=>{
        ele = this.refs.cart; とします。
        ele.update();
    }
    与える（） {
        戻る （
            <div className="order">
                <div className="order_left">
                    <ul ref="leftul">
                        {
                            this.props.orderlist.map((値,インデックス)=>{
                                戻る （
                                    // インデックスに応じて左の li の色を決定します<li onClick={this.userClick.bind(this,index)} className={this.state.leftindex===index?'leftli leftli_color':'leftli'} key={index}>
                                        <img src={value.icon} alt=""/>
                                        <span>{値の名前}</span>
                                    </li>
                                ）
                            })
                        }
                    </ul>
                </div>
                <div onScroll={this.scrollRight} クラス名="order_right">
                    <div ref="order_scroll" className="order_scroll">
                        {
                            this.props.orderlist.map((値,インデックス)=>{
                                戻る （
                                    <div className="order_block" キー={index}>
                                        <ul>
                                            {
                                                値.spus.map((v,k)=>{
                                                    戻る （
                                                        <li キー = {k}>
                                                            <div className="order_block_img">
                                                                <img src={v.picture} alt=""/>
                                                            </div>
                                                            <div className="order_block_word">
                                                                <div className="order_block_word_name">{v.name}</div>
                                                                <div className="order_block_word_zan">{v.praise_content}</div>
                                                                <div className="order_block_word_price">
                                                                    <span>￥{v.min_price}</span>/個<AddCut parent={this} name={v.name} price={v.min_price}/>
                                                                </div>
                                                            </div>
                                                        </li>
                                                    ）
                                                })
                                            }
                                        </ul>
                                    </div>
                                ）
                            })
                        }
                    </div>
                </div>
                <カート ref="cart" toprice={this.props.toprice}/>
            </div>
        );
    }
}

デフォルトの順序をエクスポートします。

'react' から React をインポートします。
'../../Assets/css/addCut.css' をインポートします。
'../../Mock/CartData' から CartData をインポートします。

クラスAddCutはReact.Componentを拡張します{
    コンストラクタ(props) {
        スーパー(小道具);
        この状態 = {  
            番号:0
        };
    }
    ユーザー追加=()=>{
        addnum=this.state.num; とします。
        数値++を追加します。
        this.setState({
            数値:数値を追加
        });
        this.addCart(追加番号);
        this.props.parent.refComponent();
    }
    ユーザーカット=()=>{
        cutnum=this.state.num; とします。
        カットナム--;
        if(カット数<0){
            カット番号=0;
        }
        this.setState({
            数値:カット数
        });
        this.addCart(カット番号);
        this.props.parent.refComponent();
    }
    addCart=(数値)=>{
        // オブジェクトコレクションを生成する let list={
            名前:this.props.name、
            価格:this.props.price,
            番号:番号
        };
        同じ=falseとします。
        カートデータの長さが0の場合
            CartData.push(リスト);
        }
        for(let i=0;i<CartData.length;i++){
            CartData[i].name===this.props.nameの場合{
                CartData[i].num=数値;
                同じ=真;
            }
        }
        if(!同じ){
            CartData.push(リスト);
        }
    }
    与える（） {
        戻る （
            <div className="addcut">
                <img onClick={this.userCut} className={this.state.num>0?'show':'showhidden'} src={require("../../Assets/image/minus.edae56b865f90527f2657782f67d9c3e.png")} alt=""/>
                <span className={this.state.num>0?'show':'showhidden'}>{this.state.num}</span>
                <img onClick={this.userAdd} src={require("../../Assets/image/plus.af10af5a9cee233c612b3cff5c2d70cd.png")} alt=""/>
            </div>
        );
    }
}

デフォルトのAddCutをエクスポートします。

'react' から React をインポートします。
'../../Assets/css/cart.css' をインポートします。
'../../Mock/CartData' から CartData をインポートします。

クラスCartはReact.Componentを拡張します。
    コンストラクタ(props) {
        スーパー(小道具);
        この状態 = {  
            カート：[]、
            合計価格:0
        };
    }
    更新=()=>{
        // データを読み込む this.setState({
            カート:CartData
        });
        // 合計価格を計算します let prices=0;
        for(let i=0;i<CartData.length;i++){
            価格+=CartData[i].price*CartData[i].num;
        }
        this.setState({
            合計価格:価格
        });
    }
    与える（） {
        戻る （
            <div className="カート">
                <div className="cart_left">
                    <img src={require("../../Assets/image/shop-icon.3a615332a0e634909dc3aa3a50335c8f.png")} alt=""/>
                    <span>￥{this.state.totalprice}</span><br/>
                    <span>{this.props.toprice} も必須です</span>
                </div>
                <div className="cart_right">チェックアウトへ進む</div>
            </div>
        );
    }
}

デフォルトのカートをエクスポートします。