How to use the React list bar and shopping cart components

This article introduces the knowledge of "how to use the React list bar and shopping cart components". In the operation of actual cases, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

I. introduction of components

Merchant details interface (StoreDetail component):

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

Click single interface (Order component):

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 iTuno: I {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 / / iterate through div, get the offset of each div, and then push it into this.state to modify and display it. After modification, you get listinfo / / if it is the first div, only take its own offset. Otherwise, take the offset of its own + listinfo [iMur1] for (let iMuth0teri {let ele=this.refs.cart; ele.update ()) } render () {return ({this.props.orderlist.map ((value) Index) = > {return (/ / judge the color of the left li according to the index

{value.name})}) { This.props.orderlist.map ((value Index) = > {return ({value.spus.map (v) K) = > {return (

{v.name} {v.praise_content} ¥{v.min_price} / copy )})} )})) }} export default Order

Add and subtract pages (AddCut component):

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 {/ / produces a collection of objects let list= {name:this.props.name, price:this.props.price, num:num}; let same=false; if (CartData.length===0) {CartData.push (list);} for (let item0) I > {this.state.num}

);} export default AddCut

Shopping cart page (Cart component):

Import React from 'react';import'.. / Assets/css/cart.css';import CartData from'.. /.. / Mock/CartData';class Cart extends React.Component {constructor (props) {super (props); this.state = {cart: [], totalprice:0} } update= () = > {/ / read the data this.setState ({cart:CartData}); / / calculate the total price let prices=0; for (let item0polii