Detaillierte Erklärung zur Verwendung der React-Listenleiste und der Warenkorbkomponenten

importiere React von „react“;
importiere Axios von „Axios“;
importiere GoBack von „../smallPage/GoBack“;
importiere '../../Assets/css/storeDetail.css';
importiere MenuList aus „../../Mock/MenuList“;
Importiere Bestellung aus „../menuPage/Order“.
importiere Evaluate aus „../menuPage/Evaluate“;
Importieren Sie Business aus „../menuPage/Business“.

Klasse StoreDetail erweitert React.Component {
    Konstruktor(Requisiten) {
        super(Requisiten);
        dieser.Zustand = {  
            Essen:null,
            Menüliste:Menüliste
        };
    }
    KomponenteDidMount(){
        axios.get("/Essen").then((res)=>{
            dies.setState({
                Essen:res.data.result.data
            });
            Konsole.log(dieser.Zustand.Essen);
        });
    }
    Benutzerauswahl=(index)=>{
        MenuList.fürJeden((Wert,Schlüssel)=>{
            val.isshow=false;
            wenn(Schlüssel===Index){
                val.isshow=true;
            }
        });
        dies.setState({
            Menüliste:Menüliste
        });
    }
    rendern() {
        zurückkehren (
            dieses.staatliche.Essen?
                <div>
                    <Zurück Titel={this.state.food.poi_info.name}/>
                    <div Klassenname = "Lebensmittelbild">
                        <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 Klassenname="Menüliste">
                            {
                                this.state.menulist.map((Wert,Index)=>{
                                    zurückkehren (
                                        <li Schlüssel={Index} bei Klick={this.userSelect.bind(this,Index)}>
                                            {Wert.Titel}
                                            <span className={value.isshow?'foodline':''}></span>
                                        </li>
                                    )
                                })
                            }
                        </ul>
                    </div>
                    {
                        this.state.menulist.map((Wert,Index)=>{
                            wenn(Wert.isshow&&index===0){
                                zurück <Bestellung toprice={this.state.food.poi_info.shipping_fee_tip} Bestellliste={this.state.food.food_spu_tags} Schlüssel={index}/>
                            }sonst wenn(Wert.isshow&&index===1){
                                return <Schlüssel auswerten={index}/>
                            }sonst wenn(Wert.isshow&&index===2){
                                zurück <Business key={index}/>
                            }anders{
                                zurückkehren '';
                            }
                        })
                    }
                </div>
            :''
        );
    }
}

Standard-StoreDetail exportieren;

importiere React von „react“;
importiere '../../Assets/css/order.css';
importiere AddCut aus „../smallPage/AddCut“;
Importiere den Warenkorb aus „../smallPage/Cart“.

Klasse Order erweitert React.Component {
    Konstruktor(Requisiten) {
        super(Requisiten);
        dieser.Zustand = {  
            Liste:[],
            linker Index:0
        };
    }
    scrollRight=(e)=>{
        let scrolltop=e.target.scrollTop;
        lassen Sie Listenhöhe = diese.Zustandsliste;
        für (lass i = 0; i < Listenhöhe.Länge-1; i++) {
            wenn(scrolltop<listenheight[i]){
                // Beim Verschieben den ersten Satz im Array nehmen und den Indexwert ändern this.setState({
                    linker Index:i
                });
                brechen;
            }sonst wenn(scrolltop>=listheight[i]&&scrolltop<listheight[i+1]){
                // Wenn der rechte Gleitwert größer als die Hälfte der Gesamthöhe ist, muss der linke Index nach unten gehen, wenn (i+1>=listheight.length/2) {
                    // Holen Sie sich die UL auf der linken Seite und verschieben Sie deren ScrollTop nach unten this.refs.leftul.scrollTop=listheight[i+1];
                }anders{
                    // ScrollTop nach oben verschieben this.refs.leftul.scrollTop=0;
                }
                dies.setState({
                    linker Index:i+1
                });
                brechen;
            }
        }
    }
    // Wenn der Benutzer klickt, ändere die Farbe des aktuellen Indexes userClick=(index)=>{
        dies.setState({
            linker Index:Index
        });
        diese.refs.order_scroll.scrollTop=index-1>=0?diese.state.list[index-1]:0;
    }
    KomponenteDidMount(){
        let order_block = document.getElementsByClassName("order_block");
        lassen Sie listinfo=diesen.Zustand.Liste;
        // Durchlaufe die Divs, hole den Offset jedes Divs und schiebe es dann in this.state, um es zu ändern und anzuzeigen. Hole nach der Änderung listinfo ab
        // Wenn es das erste Div ist, nimm nur seinen eigenen Offset, andernfalls nimm seinen eigenen Offset + listinfo[i-1] for(let i=0;i<order_block.length;i++){
            wenn(i===0){
                listinfo.push(order_block[i].offsetHeight);
            }anders{
                listinfo.push(order_block[i].offsetHeight+listinfo[i-1]);
            }
        }
        dies.setState({
            Liste:Listeninfo
        });
        // console.log(listinfo); (11) [550, 612, 1284, 1712, 2628, 5496, 7083, 8609, 9099, 9465, 10747]
    }
    //Rufen Sie die Methode zur erzwungenen Aktualisierung in der untergeordneten Komponente Cart auf und führen Sie die Methode in der AddCut-Komponente aus refComponent=()=>{
        lass ele = this.refs.cart;
        ele.update();
    }
    rendern() {
        zurückkehren (
            <div Klassenname="Bestellung">
                <div Klassenname="Bestellung_links">
                    <ul ref="leftul">
                        {
                            this.props.orderlist.map((Wert,Index)=>{
                                zurückkehren (
                                    // Bestimme die Farbe des linken li entsprechend dem Index<li onClick={this.userClick.bind(this,index)} className={this.state.leftindex===index?'leftli leftli_color':'leftli'} key={index}>
                                        <img src={value.icon} alt=""/>
                                        <span>{Wert.name}</span>
                                    </li>
                                )
                            })
                        }
                    </ul>
                </div>
                <div onScroll={this.scrollRight} Klassenname="Reihenfolge_rechts">
                    <div ref="Reihenfolge_scroll" className="Reihenfolge_scroll">
                        {
                            this.props.orderlist.map((Wert,Index)=>{
                                zurückkehren (
                                    <div Klassenname = "Bestellblock" Schlüssel = {Index}>
                                        <ul>
                                            {
                                                Wert.spus.map((v,k)=>{
                                                    zurückkehren (
                                                        <li-Schlüssel={k}>
                                                            <div Klassenname = "Bestellblock_img">
                                                                <img src={v.picture} alt=""/>
                                                            </div>
                                                            <div Klassenname = "Bestellblockwort" >
                                                                <div className="order_block_word_name">{v.name}</div>
                                                                <div className="order_block_word_zan">{v.praise_content}</div>
                                                                <div Klassenname = "Bestellblock_Wort_Preis">
                                                                    <span>￥{v.min_price}</span>/Stück<AddCut parent={this} name={v.name} price={v.min_price}/>
                                                                </div>
                                                            </div>
                                                        </li>
                                                    )
                                                })
                                            }
                                        </ul>
                                    </div>
                                )
                            })
                        }
                    </div>
                </div>
                <Warenkorb ref="Warenkorb" toprice={this.props.toprice}/>
            </div>
        );
    }
}

Standardreihenfolge exportieren;

importiere React von „react“;
importiere '../../Assets/css/addCut.css';
importiere CartData aus „../../Mock/CartData“;

Klasse AddCut erweitert React.Component {
    Konstruktor(Requisiten) {
        super(Requisiten);
        dieser.Zustand = {  
            Zahl: 0
        };
    }
    BenutzerHinzufügen=()=>{
        lassen Sie addnum=diesen.Zustand.num;
        Nachtrag++;
        dies.setState({
            Nummer: Zusatznummer
        });
        dies.addCart(addnum);
        diese.props.parent.refComponent();
    }
    BenutzerCut=()=>{
        sei cutnum=dieser.zustand.num;
        Schnittnummer--;
        wenn(Schnittzahl<0){
            Schnittnummer = 0;
        }
        dies.setState({
            Anzahl: Anzahl der Schnitte
        });
        dies.addCart(cutnum);
        diese.props.parent.refComponent();
    }
    addCart=(Anzahl)=>{
        // Erzeuge eine Objektsammlung let list={
            Name:diese.Eigenschaften.Name,
            Preis:this.props.price,
            Zahl:Zahl
        };
        lass same=false;
        wenn(CartData.length===0){
            CartData.push(Liste);
        }
        für (let i=0;i<CartData.length;i++){
            wenn(CartData[i].name===this.props.name){
                Warenkorbdaten[i].num=num;
                dasselbe=wahr;
            }
        }
        wenn(!same){
            CartData.push(Liste);
        }
    }
    rendern() {
        zurückkehren (
            <div Klassenname="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>
        );
    }
}

Standard-AddCut exportieren;

importiere React von „react“;
importiere '../../Assets/css/cart.css';
importiere CartData aus „../../Mock/CartData“;

Klasse Cart erweitert React.Component {
    Konstruktor(Requisiten) {
        super(Requisiten);
        dieser.Zustand = {  
            Warenkorb:[],
            Gesamtpreis:0
        };
    }
    aktualisieren=()=>{
        // Daten lesen this.setState({
            Warenkorb:CartData
        });
        // Gesamtpreis berechnen let prices=0;
        für (let i=0;i<CartData.length;i++){
            Preise+=Warenkorbdaten[i].Preis*Warenkorbdaten[i].Anz;
        }
        dies.setState({
            Gesamtpreis:Preise
        });
    }
    rendern() {
        zurückkehren (
            <div Klassenname = "Warenkorb">
                <div className="Warenkorb_links">
                    <img src={require("../../Assets/image/shop-icon.3a615332a0e634909dc3aa3a50335c8f.png")} alt=""/>
                    <span>￥{dieser.Zustand.Gesamtpreis}</span><br/>
                    <span>{this.props.toprice} ist ebenfalls erforderlich</span>
                </div>
                <div className="cart_right">Zur Kasse gehen</div>
            </div>
        );
    }
}

Standard-Warenkorb exportieren;