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

In diesem Artikelbeispiel wird der spezifische Code der React-Listenleiste und der Warenkorbkomponenten zu Ihrer Information geteilt. Der spezifische Inhalt ist wie folgt

1. Komponenteneinführung

Schnittstelle zu Händlerdetails (Komponente StoreDetail):

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;

Bestellschnittstelle (Komponente Bestellen):

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;

Seiten hinzufügen und entfernen (AddCut-Komponente):

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;

Warenkorbseite (Warenkorbkomponente):

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;

2. Effektanzeige

Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird.

Das könnte Sie auch interessieren:

React implementiert das Klicken, um das entsprechende Element in der Liste zu löschen
Beispiel für eine benutzerdefinierte Pulldown-Aktualisierung mit Pullup und geladener Liste in React Native
Beispielcode für die indizierte Städtelistenkomponente von React Native
Das mobile React-Terminal implementiert den Beispielcode zum Löschen der Liste durch Wischen nach links
React-Lernnotizen: Beispiel für Listen-Rendering, ausführliche Erklärung
Verwendung von ReactNative ListView
React-native-Beispielcode zur Implementierung des Schiebelöscheffekts des Einkaufswagens
React-Native verwendet Mobx, um die Warenkorbfunktion zu implementieren

<<: Detaillierte Schritte zur Installation der MySQL 5.6 X64-Version unter Linux

>>: Implementierung der Nginx-Konfiguration für den Multi-Port- und Multi-Domain-Name-Zugriff