React component design process - imitation Douyin order component
1. Component design ideas
The businesses we need to implement in this component are:
(At present, we will temporarily achieve the following effects, and the author will gradually improve the other functions of this page in the later stage~)
Tab switching:
Click on the tab, the tab will add a red underline style, and the orders in the tab state will be displayed below.
Set the loading state:
Display the loading icon while the data is still being requested
Search order:
Search for orders whose product title contains the input content under the current tab.
To delete an order:
Delete the specified order. Since the data is requested in fastmock, the deletion is only relative to the front end.
Implementing the Empty (empty state) component
When the order quantity in the current state is 0, display this component, otherwise display the list component.
According to our needs, we can divide 5 component modules to form the whole page:
The page-level component
Display data list component
empty state component
The recommended product list component
Request data in the
After analyzing the component composition, complete the construction of the component directory:
2. Implement the Myorder component
First, we first write the component framework according to the requirements, so that the business logic will be clearer later:
This page-level component includes the search box + navigation bar fixed at the top, as well as the OrderList and RecommendList components, so the following component framework can be written:
import React from 'react'
import OrderList from '../OrderList'
import RecommendList from '../RecommendList'
import { OrderWrapper } from './style'
import fanhui from '../../assets/images/fanhui.svg'
import gengduo from '../../assets/images/gengduo.svg'
import sousuo from '../../assets/images/sousuo.svg'
export default function Myorder() {
return (
// search + navbar section
placeholder="Search order"
/>
- All
- Pending payment
- Pending Shipment
- To be received/used
- Review
- Refund
// order list component
// recommendation list component
)
}
With this framework, let's implement the content step by step.
2.1 Implement tab switching effect
First, complete the first requirement: when a tab is clicked, such as 'to be paid', the tab should have a red underline effect. The implementation principle is actually very simple, that is, when we trigger the click event of the tab, we will add the active style we wrote in advance to the tab.
There are two options here:
The first way to do this is to define a state tab to control the content of each
import React,{ useState} from 'react'
import { OrderWrapper } from './style'
export default function Myorder() {
const [tab,setTab] = useState('all');
const changeTab= (target) => {
setTab(target);
}
return (
...
- all
- to be paid
- to be shipped
- to be received/used
- review
- refund
...
)
}
This method has an obvious disadvantage, that is, only one style name can be added to it. When there are multiple style class names, there will be problems, so the second method can be used.
The second method is to use classnames, which is also the recommended method, and the writing method is relatively simple.
import classnames from 'classnames'
import { OrderWrapper } from './style'
export default function Myorder() {
const [tab,setTab] = useState('all');
const changeTab= (target) => {
setTab(target);
}
return (
...
- all
- to be paid
- to be shipped
- to be received/used
- reviews
- refund
...
)
}
When there are multiple class names, add it like this:
The effect is as shown in the figure:
2.2 Get data
Two interfaces are prepared here for obtaining order data and recommended product data.
For ease of management, we encapsulate the data request in the api file:
The first interface gets order data. The acquired data needs to be filtered according to the tab state. We also write this step in the interface file:
import axios from 'axios'
// request order data
export const getOrder = ({tab}) =>
axios
.get('https://www.fastmock.site/mock/759aba4bef0b02794e330cccc1c88555/beers/order')
.then ( res => {
let result=res.data;
if(tab){
switch(tab) {
case "Pending payment":
result=result.filter(item => item.state=="to be paid");
break;
case "to be shipped":
result=result.filter(item => item.state=="to be shipped");
break;
case "to be received/used":
result=result.filter(item => item.state=="to be received/used");
break;
case "evaluation":
result=result.filter(item => item.state=="Evaluation");
break;
case "refund":
result=result.filter(item => item.state=="refund");
break;
default:
break;
}
}
return Promise.resolve({
result
});
}
)
The second interface obtains recommended product data:
import axios from 'axios'
// Request recommended product data
export const getCommend = () =>
axios.get('https://www.fastmock.site/mock/759aba4bef0b02794e330cccc1c88555/beers/goods')
The interface is ready, next we assign the data to the sub-components, and then the task of how the data is displayed on the page is handed over to the sub-components
import React,{useEffect, useState} from 'react'
import { OrderWrapper } from './style'
import OrderList from './OrderList'
import RecommendList from './RecommendList'
export default function Myorder() {
const [list,setList] =useState([]);
const [recommend,setRecommend] = useState([]);
// Get the recommended product data from the interface
useEffect(()=> {
(async()=> {
const {data} = await getCommend();
setRecommend([...data]);
})()
})
// Get the order data from the interface, and pull it again every time the tab is switched
useEffect(()=>{
(async()=>{
const {result} = await getOrder({tab});
setList([
...result
])
})()
},[tab])
return (
...
{list.length>0 &&
{recommend.length>0 &&
)
}
Related Articles
-
A detailed explanation of Hadoop core architecture HDFS
Knowledge Base Team
-
What Does IOT Mean
Knowledge Base Team
-
6 Optional Technologies for Data Storage
Knowledge Base Team
-
What Is Blockchain Technology
Knowledge Base Team
Explore More Special Offers
-
Short Message Service(SMS) & Mail Service
50,000 email package starts as low as USD 1.99, 120 short messages start at only USD 1.00