Shulou(Shulou.com)05/31 Report--

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

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.