怎么使用React列表栏及购物车组件

本篇内容介绍了"怎么使用React列表栏及购物车组件"的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！

一、组件介绍

商家详细界面（StoreDetail组件）：

import React from 'react';import axios from 'axios';import GoBack from '../smallPage/GoBack';import '../../Assets/css/storeDetail.css';import MenuList from '../../Mock/MenuList';import Order from '../menuPage/Order';import Evaluate from '../menuPage/Evaluate';import Business from '../menuPage/Business';class StoreDetail extends React.Component {    constructor(props) {        super(props);        this.state = {              food:null,            menulist:MenuList        };    }    componentDidMount(){        axios.get("/food").then((res)=>{            this.setState({                food:res.data.result.data            });            console.log(this.state.food);        });    }    userSelect=(index)=>{        MenuList.forEach((val,key)=>{            val.isshow=false;            if(key===index){                val.isshow=true;            }        });        this.setState({            menulist:MenuList        });    }    render() {        return (            this.state.food?                
                                        
                                                                        {this.state.food.poi_info.name}                    
                    
                        
                            {                                this.state.menulist.map((value,index)=>{                                    return (                                        
                                            {value.title}                                                                                    
                                    )                                })                            }                        
                    
                    {                        this.state.menulist.map((value,index)=>{                            if(value.isshow&&index===0){                                return                             }else if(value.isshow&&index===1){                                return                             }else if(value.isshow&&index===2){                                return                             }else{                                return '';                            }                        })                    }                
            :''        );    }}export default StoreDetail;

点单界面（Order组件）：

import React from 'react';import '../../Assets/css/order.css';import AddCut from '../smallPage/AddCut';import Cart from '../smallPage/Cart';class Order extends React.Component {    constructor(props) {        super(props);        this.state = {              list:[],            leftindex:0        };    }    scrollRight=(e)=>{        let scrolltop=e.target.scrollTop;        let listheight=this.state.list;        for(let i=0;i=listheight[i]&&scrolltop=listheight.length/2){                    // 获取左边的ul，让其scrollTop往下顶                    this.refs.leftul.scrollTop=listheight[i+1];                }else{                    // 让其scrollTop往上顶                    this.refs.leftul.scrollTop=0;                }                this.setState({                    leftindex:i+1                });                break;            }        }    }    // 用户点击时，让当前索引变色    userClick=(index)=>{        this.setState({            leftindex:index        });        this.refs.order_scroll.scrollTop=index-1>=0?this.state.list[index-1]:0;    }    componentDidMount(){        let order_block=document.getElementsByClassName("order_block");        let listinfo=this.state.list;        // 循环遍历div，拿到每个div的偏移量，再将其push进this.state中进行修改显示，修改后得到listinfo        // 若为第一个div，则只拿其自身的偏移量；否则，则拿其自身+listinfo[i-1]的偏移量        for(let i=0;i{        let ele=this.refs.cart;        ele.update();    }    render() {        return (            
                
                    
                        {                            this.props.orderlist.map((value,index)=>{                                return (                                    // 按照索引来判断左边li的颜色                                    
                                                                                {value.name}                                    
                                )                            })                        }                    
                
                
                    
                        {                            this.props.orderlist.map((value,index)=>{                                return (                                    
                                        
                                            {                                                value.spus.map((v,k)=>{                                                    return (                                                        
                                                            
                                                                                                                            
                                                            
                                                                
{v.name}
                                                                
{v.praise_content}
                                                                
                                                                    ￥{v.min_price}/份                                                                                                                                    
                                                            
                                                        
                                                    )                                                })                                            }                                        
                                    
                                )                            })                        }                    
                
                            
        );    }}export default Order;

加减页面（AddCut组件）：

import React from 'react';import '../../Assets/css/addCut.css';import CartData from '../../Mock/CartData';class AddCut extends React.Component {    constructor(props) {        super(props);        this.state = {              num:0        };    }    userAdd=()=>{        let addnum=this.state.num;        addnum++;        this.setState({            num:addnum        });        this.addCart(addnum);        this.props.parent.refComponent();    }    userCut=()=>{        let cutnum=this.state.num;        cutnum--;        if(cutnum<0){            cutnum=0;        }        this.setState({            num:cutnum        });        this.addCart(cutnum);        this.props.parent.refComponent();    }    addCart=(num)=>{        // 产生一个对象集合        let list={            name:this.props.name,            price:this.props.price,            num:num        };        let same=false;        if(CartData.length===0){            CartData.push(list);        }        for(let i=0;i                0?'show':'showhidden'} src={require("../../Assets/image/minus.edae56b865f90527f2657782f67d9c3e.png")} alt=""/>                0?'show':'showhidden'}>{this.state.num}