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

创新互联公司专业为企业提供双城网站建设、双城做网站、双城网站设计、双城网站制作等企业网站建设、网页设计与制作、双城企业网站模板建站服务，10多年双城做网站经验，不只是建网站，更提供有价值的思路和整体网络服务。

一、组件介绍

商家详细界面（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 '';
                            }
                        })
                    }